封装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,请问有什么办法吗？

...全文

531 10 打赏收藏举报

写回复

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