jQuery div drag and drop usage example_jquery-JS Tutorial-php.cn

jQuery div drag and drop usage example_jquery

WBOY

Release： 2016-05-16 15:20:05

Original

980 people have browsed it

The example in this article describes the usage of jQuery div drag and drop. Share it with everyone for your reference, the details are as follows:

You need to reference the jquery and jqueryui packages here:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus&reg;">
<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>

Copy after login

Readers who are interested in more content related to jQuery special effects can check out the special topic of this site: "Summary of common classic special effects in jQuery"

I hope this article will be helpful to everyone in jQuery programming.