编程 Javascript

jQuery div拖拽用法实例

Posted in Javascript onJanuary 14, 2016

本文实例讲述了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 div拖拽用法实例

- Author -

乘着风在飞

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

测试JavaScript字符串处理性能的代码

Dec 07 Javascript

json格式化/压缩工具 Chrome插件扩展版

May 25 Javascript

js setTimeout 参数传递使用介绍

Aug 13 Javascript

查找页面中所有类为test的结点的方法

Mar 28 Javascript

JQuery对表单元素的基本操作使用总结

Jul 18 Javascript

jquery delay（）介绍及使用指南

Sep 02 Javascript

Javascript学习指南

Dec 01 Javascript

分享jQuery插件的学习笔记

Jan 14 Javascript

【经验总结】编写JavaScript代码时应遵循的14条规律

Jun 20 Javascript

JavaScript获取ul中li个数的方法

Feb 13 Javascript

用vue的双向绑定简单实现一个todo-list的示例代码

Aug 03 Javascript

React forwardRef的使用方法及注意点

Jun 13 Javascript

javascript检测flash插件是否被禁用的方法

Jan 14 #Javascript

分享jQuery插件的学习笔记

Jan 14 #Javascript

jQuery时间插件jquery.clock.js用法实例(5个示例)

Jan 14 #Javascript

Jquery easyui开启行编辑模式增删改操作

Jan 14 #Javascript

JavaScript基本语法学习教程

Jan 14 #Javascript

JavaScript对象参数的引用传递

Jan 14 #Javascript

阿里巴巴技术文章分享 Javascript继承机制的实现

Jan 14 #Javascript