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

主要功能需求说明：

创新互联专注于闻喜企业网站建设,响应式网站建设,商城开发。闻喜网站建设公司,为闻喜等地区提供建站服务。全流程按需求定制开发，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

1.左侧的元素结构最后会通过Ajax call服务器的数据来生成，能支持多级元素。父节点可以折叠起来

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

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

第一步：左侧元素可以拖

官方给出的实例是直接在要拖动的元素上添加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).html(); var draggableDiv = $("#draggableDiv");

$(draggableDiv).css({ "display": "block", "height": 0 });

//将点击的元素内容复制

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": "0" }); });

//拖动元素时鼠标的位置

var dragDivLeft = 0;

var dragDivTop = 0;

$("#draggableDiv").draggable({

containment: "parent", drag: function (event, ui) {

$("#draggableDiv").css({ "width": "260px", "height": "22px" });

$("#draggableDiv").append(clickElement);

var closeTop = $(".closeBar").offset().top;

dragDivLeft = event.target.offsetLeft;

dragDivTop = event.target.offsetTop; },

stop: function () {

//拖拽结束，将拖拽容器内容清空

$("#draggableDiv").html("");

$("#draggableDiv").css({"height":"0"}); }

});

第三步：右边的元素可以放到指定的位置上

需要将元素拖到指定的区域里面，然后释放操作。完成“放”的操作。可以从上图看出，我是将元素的上边左边和下边缘的左边存到一个数组里面。然后在“拖”的过程中，一直记录了拖动的左边，放到右侧时，就可以判断当前元素将要放的位置。具体可以下载代码查看。

jquery 简介

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

历史

大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。

当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich，开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。

因为 JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候，微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉，但也成为 JavaScript 语言发展过程中的重要一步。

在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。

2006年1月，jQuery的第一个版本面世，至今已经有10年多了（注：这个时间点是截止至出书时间）。虽然过了这么久，但它依然以其简洁、灵活的编程风格让人一见倾心。在本篇文章中，我们将讲述jQuery的发展 历史 ，让读者对jQuery有更多的了解。

在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，IBM，Intuit等公司。

2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle，在各个浏览器下全面超越其他同类型JavaScript框架的查询速度，程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法，使用live()方法可以为当前及将来增加的元素绑定事件，在1.3版之前，如果要为将来增加的元素绑定事件，需要使用livequery插件，而在1.3版中，可以直接用live()方法。　2005年8月，John Resig提议改进Prototype的“Behaviour”库，于是他在blog上发表了自己的想法，并用了3个例子做说明。

2010年2月，jQuery 1.4.2版发布，它新增了有关事件委托的两个方法：delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便，而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件

特点

1.动态特效

2.AJAX

3.通过插件来扩展

4.方便的工具 - 例如浏览器版本判断

5.渐进增强

6.链式调用

7.多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）

历史 版本

jQuery 1.0

（2006年8月）：该库的第一个稳定版本，已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。

jQuery 1.1

（2007年1月）：这一版大幅简化了API。许多较少使用的方法被合并，减少了需要掌握和解释的方法数量。

jQuery 1.1.3

（2007年7月）：这次小版本变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始，jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。

jQuery 1.2

（2007年9月）：这一版去掉了对XPath选择符的支持，原因是相对于CSS语法它已经变得多余了。这一版能够支持对效果的更灵活定制，而且借助新增的命名空间事件，也使插件开发变得更容易。

jQuery UI（2007年9月）：这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件（widget），以及一组用于构建高级元素（例如可拖放的界面元素）的工具。

jQuery 1.2.6

（2008年5月）：这一版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。

jQuery 1.3

（2009年1月）：这一版使用了全新的选择符引擎Sizzle，库的性能也因此有了极大提升。这一版正式支持事件委托特性。

jQuery 1.3.2

（2009年2月）：这次小版本升级进一步提升了库的性能，例如改进了：visible/:hidden选择符、.height()/.width()方法的底层处理机制。另外，也支持查询的元素按文档顺序返回。

jQuery 1.4

（2010年1月14号）：对代码库进行了内部重写组织，开始建立一些风格规范。老的core.js文件被分为attribute.js,css.js,data.js,manipulation.js,traversing.js和queue.js；CSS和attribute的逻辑分离。

重要变化：

1. Ajax重写

Ajax模块完全进行了重写。新增一个jXHR对象，为不同浏览器内置的XMLHttpRequest提供了一致的超集。对于XMLHttpRequest之外的传输机制，比如JSONP请求，jXHR对象也可以进行处理。（详情可以参见：jQuery.ajax文档）

此外，系统的可扩展性大大增强，可以附加各种数据处理器、过滤器和传输机制，为开发新的Ajax插件提供了方便。

2. 延迟对象

延迟对象（Deferred Object，jQuery.Deferred对象）是一个可链接的（chainable）实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。正如Using Deferreds in jQuery 1.5一文中说明的，其结果是在jQuery中能够将依赖于某个任务（事件）结果的逻辑与任务本身解耦了。这一点在JavaScript中其实并不新鲜，Mochikit和Dojo等已经实现有些日子了。由于jQuery 1.5的Ajax模块内置使用了延迟对象，因此通过jQuery编写Ajax程序将自动获得这一功能。

开发人员借此可以使用无法立即获得的返回值（如异步Ajax请求的返回结果），而且第一次能够附加多个事件处理器。

例如，使用了新的jQuery内部Ajax API就可以实现下面的代码了：

// Assign handlers immediately after making the request,// and remember the jxhr object for this request var jxhr = $.ajax({ url: "example.php" }) .success(function() { alert("success"); }) .error(function() { alert("error"); }) .complete(function() { alert("complete"); });// perform other work here ... // Set another completion function for the request above jxhr.complete(function(){ alert("second complete"); });

此外，使用jQuery.Deferred还可以开发自己的延迟对象。更多详情参见：延迟对象文档。

3. jQuery.sub()

jQuery 1.5提供了一种创建和修改jQuery副本的方式。可以用来添加不向外部公开的方法，或者对jQuery的某些方法进行重新定义以提供新功能，或者提供更好的封装、避免名称空间冲突。当然，也可以用来开发插件，但Resig强烈建议在开发插件之前，先考虑jQuery UI widget工厂。

值得注意的是，sub函数并不提供真正的隔离，所有方法、数据、调用仍然依靠jQuery本身来支持。

4. 遍历性能提高

在新版本中.children(),.prev(),.next()几个常用的遍历函数性能有了显著提高。

5. 内部开发系统

John Resig还特别提到了jQuery团队内部开发系统的两点改变：一是服务器端用Node.js替换了老的Java/Rhino系统，使得团队可以专注于JavaScript环境的新变化；二是所用的代码优化程序从Google Closure切换到UglifyJS，新工具的压缩效果非常令人满意。

使用方法

jQuery可以下载使用，有两个版本的 jQuery 可供下载

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

jQuery 1.8.0版时压缩前后的对比

插件机制

jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。网上已经有数以万计的jQuery插件，覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。jQuery 的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,例如ComponentOne Studio for ASP NET Wijmo.

随着jQuery插件在网站建设过程中的使用率不断的增加，所以有必要跟进时代步伐开发出一些新的插件/代码片段，以此来巩固并提高前端用户体验，将用户体验提升到一个新的高度。其中包括Flat jQuery Price Slider、Gmaps jQuery Map Plugin 、FormChimp——MailChimp Ajax plugin for jQuery 等。

控件

jQuery Gantt控件是一个基于原生HTML5/jQuery，功能丰富的控件，该控件真正实现了跨平台，在许多设备和浏览器中无缝的运行。

使用项目甘特图中内置的调度，依赖等功能实现任务分层列表的可视化。

使用资源甘特图实现一个资源利用视图。

使用基于API的jQuery或者基于API的MVC可帮您轻松地安装甘特图并加快应用速度。

可与诸如KnockOut(KO),jQuery.tmpl等流行的jQuery模式一同使用。

jquery 中当鼠标被按下然后拖动,经过一个元素,如何触发这个元素绑定的悬浮事件呢

用h5的拖放事件。ondrag,ondragenter,ondragover,ondrop等。给你一个demo。记得自己加图片。

!DOCTYPE HTML

html

head

titleHTML5实现拖拽操作/title

meta charset="utf-8"/

style

.album

{

border: 3px dashed #ccc;

float: left;

margin: 10px;

min-height: 100px;

padding: 10px;

width: 220px;

}

/style

/head

body

div id="info"

h2温馨提示：可将照片直接拖到垃圾箱中/h2

/div

div id="album" class="album"

h2相册/h2

img draggable="true" id="img1" src="jq/audio1.png" /

img draggable="true" id="img2" src="jq/audio2.png" /

img draggable="true" id="img3" src="jq/audio3.png" /

div id="div1" draggable="true"暗涌/div

/div

div id="trash" class="album"

h2垃圾箱/h2

h1 id="h1" draggable="true"what/h1

/div

br/

/body

script

console.log("start");

info = document.getElementById("info");

src = document.getElementById("album");

target = document.getElementById("trash");

function converse(){

target.ondragstart = function(e){

var dragid = e.target.id;

var divdraged = document.getElementById(dragid);

console.log(divdraged);

divdraged.ondragend = function(){

info.innerHTML = "h2温馨提示：可将照片直接拖到垃圾箱中/h2";

}

e.dataTransfer.setData("div",dragid);

}

target.ondrag = function(){

info.innerHTML = "h2确认回收此垃圾/h2"

}

src.ondrop = function(e){

var dragid = e.dataTransfer.getData("div");

console.log(dragid);

var dragobject = document.getElementById(dragid);

console.log(dragobject);

dragobject.parentNode.removeChild(dragobject);

info.innerHTML = "h2恢复成功！/h2";

src.appendChild(dragobject);

e.preventDefault();

}

src.ondragenter = function(e){

e.preventDefault();

}

src.ondragover = function(e){

e.preventDefault();

}

}

function init(){

src.ondragstart = function (e) {

var dragImgId = e.target.id;

console.log(dragImgId);

var dragImg = document.getElementById(dragImgId);

dragImg.ondragend = function(e){

info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";

};

e.dataTransfer.setData("img",dragImgId);

};

src.ondrag = function(e){

info.innerHTML="h2--照片正在被拖动--/h2";

}

target.ondragenter = function(e){

e.preventDefault();

}

target.ondragover = function(e){

e.preventDefault();

}

target.ondrop = function (e) {

var draggedID = e.dataTransfer.getData("img");

console.log(draggedID);

var oldElem = document.getElementById(draggedID);

oldElem.parentNode.removeChild(oldElem);

target.appendChild(oldElem);

info.innerHTML="h2温馨提示：可将照片直接拖到垃圾箱中/h2";

e.preventDefault();

}

}

init();

converse();

/script

/html

简单拖拽即生成网页 VvvebJs

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库，你可以以简单拖拽的方式生成自己需要的网页样式，内置jquery和Bootstrap，你可以拖拽相关的组件进行网页的构建，非常的方便，而且可以实时修改代码，功能丰富，使用简单，界面友好，特别适合一些专注于展示的网页设计，需要的朋友不可错过！

在线演示：

相关特性

1、组件和块/片段拖放;

2、撤销/重做操作;

3、一个或两个面板界面;

4、文件管理器和组件层次结构导航添加新页面;

5、实时代码编辑器;

6、包含示例php脚本的图像上传;

7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本;

8、组件/块列表搜索;

9、Bootstrap 4组件等组件。

默认情况下，编辑器附带Bootstrap 4和Widgets组件，可以使用任何类型的组件和输入进行扩展。

使用方式

要初始化编辑器，调用Vvveb.Builder.init。第一个参数是要加载以进行编辑的URL，它必须位于相同的子域中才能进行编辑。第二个参数是页面加载完成时调用的函数，默认情况下调用编辑器Gui.init();

结构

Component Group是一个组件集合，例如Bootstrap 4组由Button和Grid等组件组成，该对象仅用于在编辑器左侧面板中对组件进行分组。例如，Widgets组件组只有两个组件视频和地图，并被定义为如下

Component是一个对象，它提供可以在画布上放置的html以及在选择组件时可以编辑的属性，例如Video Component，具有Url和Target属性的html链接Component定义为：

在Component属性集合中使用Input对象来编辑属性，例如文本输入，选择，颜色，网格行等。例如，TextInput扩展Input对象并定义为：

输入还需要一个在编辑器html（在editor.html中）定义为 以上是借助浏览器翻译工具，对官网的文档进行简单的翻译，可能会有些不够准确的地方，感兴趣的小伙伴可以直接查看相关文档！

设计界面预览

总结

VvvebJs是一个非常强大的网页可视化生成构建工具，让不懂网页设计的小伙伴们也能够通过拖拽来生成美观大方的网页出来，让设计网页就像设计图片一样，VvvebJs特别适合展示型网页，甚至可以不需要代码就能完成一项复杂的网页设计，总体来说，VvvebJs是一个值得尝试的工具！

原文来自：

北大青鸟java培训：7大优秀的JavaScript库？

现在有很多各种各样的JavaScript库，但这里将介绍7个很优秀的可用于你下一个JavaScript项目的库。

仪表盘是用于目标或业务流程的视觉指示工具，也用于切割杂乱无章的数据，从而分割出要点的重要工具。

它可帮助评估信息，并及时做出正确的决定。

实时可视化的仪表盘由图标、测绘图、图形符号，以及数据表格等组成。

目前有一些开源或商业的库用于创建仪表盘。

在本文中，我们将会展示一些可帮助创建美观且可自定义的仪表盘的JavaScript库。

1.Gridster.jsGridster是一个jQuery插件，可以从跨多个列的元素构建直观的可拖拽布局。

它可以让你从网格中动态添加或删除小部件，甚至可以获得一个具有所有小部件位置的对象的JavaScript数组，从而可以在以后使用这些数组来加载小部件。

2.angular-gridster这是一个用于AngularJS的格子状小部件的实现。

它具有jQuerygridster插件等功能，也具有一些其他的功能。

它完全使用Angular指令重写，还可以使用Angular的数据绑定功能。

3.gridstack.jsgridstack.js是一个用于小部件布局的jQuery插件，灵感来自gridster.js。

这是一个可拖放的多列网格，可让你构建可拖拽的响应式Bootstrapv3的友好布局，它还适用于knockout.js,angular.js和触摸设备。

4.jQueryGridlyGridly是一个jQuery插件，电脑培训建议可用于拖放以及在网格中调整大小。

5.PackeryPackery是一个JavaScript库和jQuery插件，可用于生成无缝且可拖拽的布局。

它使用bin-packing算法来填充空隙。

它适合用于创建一个可拖拽的仪表盘和无缝的“砖石图像画廊”布局。

本文标题：jquery拖放,jquery 拖拽交换位置
文章链接：http://ybzwz.com/article/dsgdedo.html