jQuery div拖拽用法实例

2019-11-20 10:48:12

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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 class=/"fish/" 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 class=/"yuanjian/" 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 style="height:400px;width:400px;border:1px solid gray;"><div style="margin-left:10px;margin-top:10px;border:1px solid red;width:100px;height10px;">展示列表</div><div id="add_div" style="margin-left:10px;margin-top:10px;border:1px solid green;width:350px;height:320px;"></div></div><div style="margin-top:10px;height:300px;width:400px; border: 1px solid gray;"><div style="margin-left:10px;margin-top:10px;border:1px solid red;width:250px;height10px;">原件列表 <button onclick="add_yuanjian()">增加原件</button></div><div id="add_yuanjian_div"></div></div></body></html>

更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》

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

上一篇：js实现input密码框提示信息的方法(附html5实现方法)

下一篇：javascript检测flash插件是否被禁用的方法