如何使用jQuery Draggable和Droppable实现拖拽功能

　在以前的文章中我已经介绍了web开发中基本拖放原理 现在给出需要完成的功能 最后运行的效果 如下图所示

　 主要功能需求说明 左侧的元素结构最后会通过Ajax call服务器的数据来生成 能支持多级元素 父节点可以折叠起来

　 用户可以通过拖放的 *** 作 将元素从左侧拖放到右侧 如果是拖的父节点元素 那么需要把它子节点的元素一并拖到右边

　 元素放到右侧 右侧可以接受元素的区域有 种可能 一种新建一个区域 就类似“华东交通大学”所示 另外一种就是拖放到已经有元素的区域 两者的关系是“或” 单个元素区域有“非”和“且”的关系 点击右边删除按钮可以删除节点元素

　 第一步 左侧元素可以拖 官方给出的实例是直接在要拖动的元素上添加class="ui widget content" 最初我是在所有要拖动的元素都添加了“ui widget content”类别 但是测试拖动结果 发现元素只能在它所在的 container里面拖动 再往右拖动 div会出现水平或垂直滚动条 不知道是不是自己在参数设置上不对 container设置了 overflow:auto 效果如下图所示: 因 为最终的左侧元素节点是通过Ajax访问后台返回json数据 然后通过Javascript动态生成这种结构 而已不能为动态生成的元素绑定drag事 件 也就不能调用draggable方法 所以我使用了一个称之“中间拖拽容易元素” 这div一直在页面上 只是默认不显示 只要用户开始拖拽左侧的元 素时 它就出现了 当然这里需要自己手动添加很多代码

复制代码 代码如下: <div id= draggableDiv class="ui widget content">         中间拖拽容器元素     </div>     <script type=text/javascript>         $("#draggableDiv") draggable({             containment: "parent"             drag: function (event ui) { console log("拖拽中"); }             stop: function () { console log("拖拽结束"); }         });     </script>

　 第二步 将 要拖的元素内容复制到draggableDiv上 实现拖动父节点时 其下面的子节点元素也要拖放到右边 如果是拖动的子节点元素 就在右边直接显示子节 点元素 父节点和子节点是相对的 因为左侧树形结构的节点可以是无限级的 所以一个元素既可能是子节点元素 也会是父节点元素 通过监听鼠标的 mousedown和mouseup事件 来判断用户在拖动元素 这步的原理如下图所示 当 用户拖动B节点时 首先把B元素上的内容复制给draggableDiv元素 当用户拖动B元素 其实是拖动draggableDiv元素 所以我们要计 算出我们点击的B元素的位置 然后让draggableDiv在拖动时候显示正确的位置 然后拖动就是draggableDiv元素 用户看起来是拖动的 B节点元素

复制代码 代码如下: var clickElement = null; $(" threepanels ptreelist") bind("mousedown" function (event) { //获取当前mousedown元素的内容 var itemContent = $(this) (); var draggableDiv = $("#draggableDiv"); $(draggableDiv) css({ "display": "block" "height": }); //将点击的元素内容复制 clickElement = $(this) clone(); var currentdiv = $(this) offset(); $(draggableDiv) css({ "top": currentdiv top "left": currentdiv left }); draggableDiv trigger(event); //取消默认行为 return false; }); $("#draggableDiv") mouseup(function (event) { $(this) css({ "height": " " }); }); //拖动元素时鼠标的位置 var dragDivLeft = ; var dragDivTop = ; $("#draggableDiv") draggable({ containment: "parent" drag: function (event ui) { $("#draggableDiv") css({ "width": " px" "height": " px" });     $("#draggableDiv") append(clickElement);     var closeTop = $(" closeBar") offset() top;     dragDivLeft = event target offsetLeft;     dragDivTop = event target offsetTop; }     stop: function () {         //拖拽结束 将拖拽容器内容清空         $("#draggableDiv") ("");         $("#draggableDiv") css({"height":" "}); } }); lishixinzhi/Article/program/Java/JSP/201311/20005

sortablejs 官网

拖放排序插件Sortablejs中文介绍

1 安装 npm 或 yarn 安装

2 使用

效果：

3 小结

事件：

onChoose ：function 列表单元被选中的回调函数

onStart ：function 列表单元拖动开始的回调函数

onEnd ：function 列表单元拖放结束后的回调函数

onAdd ：function 列表单元添加到本列表容器的回调函数

onUpdate ：function 列表单元在列表容器中的排序发生变化后的回调函数

onRemove ：function 列表元素移到另一个列表容器的回调函数

onFilter ：function 试图选中一个被filter过滤的列表单元的回调函数

onMove ：function 当移动列表单元在一个列表容器中或者多个列表容器中的回调函数

onClone ：function 当创建一个列表单元副本的时候的回调函数

事件对象：

to ：HTMLElement--移动到列表容器

from ：HTMLElement--来源的列表容器

item ：HTMLElement--被移动的列表单元

clone ：HTMLElement--副本的列表单元

oldIndex ：number/undefined--在列表容器中的原序号

newIndex ：number/undefined--在列表容器中的新序号

方法

option(name[,value])

获得或者设置项参数，使用方法类似于jQuery用法，没有第二个参数为获得option中第一个参数所对应的值，有第二个参数时，将重新赋给第一个参数所对应的值；

toArray()

序列化可排序的列表单元的data-id（可通过配置项中dataIdAttr修改）放入一个数组，并返回这个数组中

sort()

通过自定义列表单元的data-id的数组对列表单元进行排序

save()

destroy()

你好~~

这个问题就很好解决，这里可以直接通过JavaScript的id属性进行赋值即可。

$each(data, function (i, obj) {

        //jquery赋值方式：设置一个临时变量，通过select元素构造一个jquery对象

        //然后返回这个对象的outerHTML

        //var tmpSel = $(select)attr("id","sel_"+i)get(0)outerHTML;

        

        //javascript方式:非常简单

        var tmpSel    = select;

        tmpSelid      = "sel_" + i;         //这里的id可以根据自己的规则赋值

        

        var td = $("<td align='center' class='td'>" + tmpSel   + "<img alt='' title='分配' src='/images/bt_yesgif' style='border:0px' class='分配'/></td>");

        var tr = $("<tr></tr>");

        trappend(td);

        $("#table1")append(tr);

  });

第一种：

$("#tabQuestion2 tr")mouseover(function(){

$(this)find("div")show();

});

$("#tabQuestion2 tr")mouseout(function(){

$(this)find("div")hide();

});

第二种：

$("#tabQuestion2 tr")mouseover(function(){

for(var i=0;i<$("#tabQuestion2 tr")length;i++){

$("#tabQuestion2 tr:eq("+i+")")find("div")hide();

}

$(this)find("div")show();

});

把隐藏/显示的速度去掉你试试

jquery的拖动函数有个参数控制这个，有很多活动范围可选择，如下：

1containment:

[类型]选择器, 元素, 字符串, 数组

选择器: 只能在选择器约束的元素内拖动

元素: 只能在给定的元素内拖动

2字符串:

parent: 只能在父容器内拖动

document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条

widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条

3数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值

false: 不限制拖动的活动范围

[默认值]false

[产生影响]

影响指定可拖动控件的活动区域

[代码示例]

[初始化]

$('selector')draggable({ containment: 'parent' });

[获取属性值]

var containment = $('selector')draggable('option', 'containment');

[设置属性值]

$('selector')draggable('option', 'containment', 'parent');