手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery div拖拽用法实例
jQuery div拖拽用法实例
摘要:本文实例讲述了jQuerydiv拖拽用法。分享给大家供大家参考,具体如下:这里需要引用好jquery和jqueryui两个包:Documen...

本文实例讲述了jQuery div拖拽用法。分享给大家供大家参考,具体如下:

这里需要引用好jquery 和 jqueryui两个包:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery1.8.3.js"></script> <script src="jquery-ui.js"></script> <style> .yuanjian{ float:left; width:180px; height:22px; padding-left:5px; margin-left:5px; margin-top:5px; cursor:pointer; border: 1px solid orange; } .fish{ float:left; width:180px; height:22px; padding-left:5px; margin-left:15px; margin-top:15px; cursor:pointer; border: 1px solid red; } </style> <script> $(function (){ $('#add_div').droppable({ accept:" .yuanjian ", hoverClass: "droppable-hover", drop: function(event, ui){ if(ele!=''){ if(ele.id.substr(0,13)=="div_yuanjian_"){ var tmpId = "fish_"+ele.id.substr(13,ele.id.length-13); var new_div = "<div id=""+tmpId+"">"+$('#'+ele.id).html() +" </div>"; $(this).before(new_div); //可以在这里绑定tmpId事件 } } } }); }); var ele = ''; var add_div_num = 0; function add_yuanjian(){ add_div_num++; var div_id = "div_yuanjian_"+add_div_num; var add_div = "<div id=""+div_id+"">原件"+add_div_num+"</div>"; $('#add_yuanjian_div').before(add_div); $('#'+div_id).mouseover(function(){ $(this).css({background:"#E0E0E0"}); }).mouseout(function(){ $(this).css({background:"#FFFFFF"}); }).draggable({ helper:'clone', opacity:0.5, start:function(event,ui){ ele = event.srcElement || event.target; }}); } </script> </head> <body> <div> <div>展示列表 </div> <div id="add_div"> </div> </div> <div> <div>原件列表 <button>增加原件</button> </div> <div id="add_yuanjian_div"> </div> </div> </body> </html>

希望本文所述对大家jQuery程序设计有所帮助。

【jQuery div拖拽用法实例】相关文章:

Jquery使用css方法改变样式实例

js实现简单div拖拽功能实例

javaScript中slice函数用法实例分析

JQuery控制Radio选中方法分析

JQuery分屏指示器图片轮换效果实例

javascript原型模式用法实例详解

JQuery中节点遍历方法实例

js中setTimeout()与clearTimeout()用法实例浅析

动态加载jQuery的方法

jQuery聚合函数实例

精品推荐
分类导航