jQuery div拖拽用法实例

前端技术 2023/09/04 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9962

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案