封装jqueryUI的drop事件的问题

WDYDXF 2015-05-28 06:57:53
jqueryUI里的dropable的drop事件,类似以下代码:


var testLib={

testFun:function(callback){
$( ".selector" ).droppable({
drop: function( event, ui ) {
//这里想执行callback

}

}

}
});


我写了个类库,封装这个dropable插件,在drop事件里,想执行testFun参数的callback,请问有什么办法吗?
...全文
540 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_34811601 2016-09-23
  • 打赏
  • 举报
回复
可以的话,发一份到我的邮箱,1163598977@qq.com 封装droppable插件
qq_34811601 2016-09-23
  • 打赏
  • 举报
回复
大神,怎样封装droppable
WDYDXF 2015-06-05
  • 打赏
  • 举报
回复
引用 7 楼 danica7773 的回复:
你自己試試我做測試的頁面,你再看看你提的問題。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;}
	#draggable{width:100px;height:100px;background-color:#a20000;}
	#droppable{width:400px;height:400px;background-color:#ff6600;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<script type="text/javascript">
$(document).ready(function() {
	var testLib = {
		testFun: function(callback) {
			$("#draggable").draggable(); 
			$("#droppable").droppable({
				drop: function(event, ui) {
					callback();
				} 
			}); 
		}
	};

	testLib.testFun(function() {
		alert('1');
	});
});
</script>
</body>
</html>
谢谢,发现是我循环调用了,题目中的例子是我手写的,没有执行;
打字员 2015-06-03
  • 打赏
  • 举报
回复
你自己試試我做測試的頁面,你再看看你提的問題。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;}
	#draggable{width:100px;height:100px;background-color:#a20000;}
	#droppable{width:400px;height:400px;background-color:#ff6600;}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<script type="text/javascript">
$(document).ready(function() {
	var testLib = {
		testFun: function(callback) {
			$("#draggable").draggable(); 
			$("#droppable").droppable({
				drop: function(event, ui) {
					callback();
				} 
			}); 
		}
	};

	testLib.testFun(function() {
		alert('1');
	});
});
</script>
</body>
</html>
WDYDXF 2015-06-03
  • 打赏
  • 举报
回复
引用 4 楼 lyj787505955 的回复:
//官网的Demo就是这样

  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        //callback
        $( this ).addClass( "ui-state-highlight" )
                     .find( "p" )
                     .html( "Dropped!" );
      }
    });
  });

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
谢谢帮顶
WDYDXF 2015-06-03
  • 打赏
  • 举报
回复
引用 3 楼 danica7773 的回复:

var testLib = {
testFun:function(callback){ 
$( ".selector" ).droppable({
  drop: function( event, ui ) {
//这里想执行callback
 callback();//直接執行啊,難道是我理解錯了?
}
 
}
 
}
});
你执行一下试试,报错啊,未定义, 因为当前的this已经不是testFun了,所以找不到callback这个参数
打字员 2015-06-02
  • 打赏
  • 举报
回复

var testLib = {
testFun:function(callback){ 
$( ".selector" ).droppable({
  drop: function( event, ui ) {
//这里想执行callback
 callback();//直接執行啊,難道是我理解錯了?
}
 
}
 
}
});
WDYDXF 2015-06-02
  • 打赏
  • 举报
回复
Mr-Hero 2015-06-02
  • 打赏
  • 举报
回复
//官网的Demo就是这样

  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        //callback
        $( this ).addClass( "ui-state-highlight" )
                     .find( "p" )
                     .html( "Dropped!" );
      }
    });
  });

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
WDYDXF 2015-05-29
  • 打赏
  • 举报
回复

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧