jQuery EasyUI Draggable拖动组件
上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式（排除easyload加载方式），所以本篇要总结的Draggable组件同样有两种方式加载：
（1）、使用class加载方式：
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div>
（2）、JS 加载调用
$('#box').draggable();
同样上文也说了，使用class属性不利于我们拓展组件的其他属性，所以我们使用JS调用的方式，后面的文章也是使用JS调用的方式。
该组件有若干属性、方法及触发事件，不在这里列举了，都放到代码示例里并且加上注释了。
示例：
<!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></script> <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" /> <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> <script> $(function () { $.fn.draggable.defaults.cursor = 'text';//*****采用这种方式重写默认值 $('#box').draggable({ //revert : true, 默认值为false 设置为true的时候拖动结束后返回起始位置 //cursor : 'text', 定义拖动时指针的样式 //handle : '#pox', 开始拖动时的句柄,就是点击哪里可以拖动，参数是一个JQ选择器 //disabled : true, 设置为true的时候,禁止拖动 //edge : 0, //axis : 'v', 不写：任意拖动 值为v：垂直拖动 值为h：水平拖动 //proxy : 'clone', 当使用'clone'的时候则克隆一个替代元素拖动，如果指定一个函数，则可以自定义替代元素。 deltaX : 50,//被拖动元素对应于当前光标位置X deltaY : 50,//被拖动元素对应于当前光标位置Y proxy : function (source) { var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); p.html($(source).html()).appendTo('body'); return p; } /** 可触发的事件： onBeforeDrag : function (e) { alert('拖动前触发！'); }, onBeforeDrag : function (e) { //return false; }, onStartDrag : function (e) { alert('拖动开始触发！'); console.log($('#box').draggable('proxy')); }, onDrag : function (e) { //alert('拖动过程触发！'); }, onStopDrag : function (e) { alert('拖动结束后触发！'); } */ }); //$('#box').draggable('disable');//禁止拖动 //$('#box').draggable('enable');//可以拖动 //alert($('#box').draggable('options')); //返回对象属性 }); </script> </head> <body> <div id="box" style="width:400px;height:200px;background:orange;"> <span id="pox">内容部分</span> </div> </body> </html>
点击下载源代码：jQuery EasyUI Draggable拖动组件
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
问题内容： 我在网上搜索了可拖动的Swing组件的示例，但发现示例不完整或不起作用。 我需要的是一个 Swing组件 ，可以用鼠标将其 拖动 到另一个组件中。在拖动时，它应该 已经改变 了位置，而不仅仅是“跳转”到目的地。 我将感谢没有非标准API的示例。 谢谢。 问题答案： 我提出了一个简单但可行的解决方案，我自己找到了；） 我该怎么办？ 当按下鼠标时，我 在屏幕上* 记录了 光标的 位置以及
-
该行为会自动创建事件监听器来处理元素的拖动，可支持鼠标事件和触摸事件。 d3.behavior.drag() 构造一个新的拖拽行为； drag.on(type[, listener]) 注册指定的监听器listener 来接收拖动行为中指定类型type的事件；如果监听器listener 未指定，则为指定的类型type的事件返回当前已注册的监听器（事件类型可能包含命名空间，查看详细参见： dispa
-
本文向大家介绍vue开发拖拽进度条滑动组件，包括了vue开发拖拽进度条滑动组件的使用技巧和注意事项，需要的朋友参考一下 分享一个最近写的进度条滑动组件，以前都是用jq写，学会了vue，尝试着拿vue来写觉得非常简单，代码复用性很强！ 效果图如下： 调用组件如下： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
实现控件拖动功能。 作者说：其实网上已不乏实现控件拖动的代码,但是很多都是在N多类和层层框架结构中。从这些类中只提取控件拖动的代码对于新手来说要煞费时间。这里为了给大家节省一些时间，所以将此功能写为Demo上传。原理在这里就不说了，一共不过十几行代码一看就懂。另外，此Demo的拖动功能实现于控件内部不依附于父视图touch事件。 [Code4App.com]
-
问题内容： 我正在使用TransferHandler将数据从JPanel作为JLabel传递到JTextArea （单击左侧面板中的某处以创建要拖动的JLabel） 数据的传输工作正常，但是我还想“显示” JLabel，因为 它与鼠标指针一起被拖动。 如果您注释掉 您将看到我想要它的外观。（但当然不会传输数据）。 如何既可以进行传输又可以使JLabel跟随鼠标光标？ 这是代码： 问题答案： 另一个
-
jQueryUI提供了draggable()方法，可以使任何DOM元素可拖动。 一旦元素可拖动，您可以通过用鼠标单击它并将其拖动到视口内的任何位置来移动该元素。 语法 (Syntax) draggable()方法可以使用两种形式 - $（selector，context）.draggable（options）方法 $（selector，context）.draggable（“action”，[pa