`
zy116494718
  • 浏览: 473093 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery ui 元素拖拽

 
阅读更多

JQuery UI的拖拽功能

 

JQuery UI是JQuery官方支持的WebUI 代码库，包含底层交互、动画、特效等API，并且封装了一些Web小部件（Widget）。同时，JQuery UI继承了jquery的插件支持，有大量的第三方插件可以丰富JQuery UI的功能。
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。

拖拽原理

首先要明确几个概念。
　　ource：拖拽源，要拖动的元素。
　　taerget：拖放目标，能够放入source的容器。
拖拽的动作分解如下：
　　1. drag start：在拖拽源(source)上按下鼠标并开始移动
　　2. drag move: 移动过程中
　　3. drag enter: 移动进入目标(target)容器
　　4. drag leave: 移出目标(target)容器
　　5. drop: 在目标(target)容器上释放鼠标
　　6. drag end: 结束
在html5之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

最简单的例子

最简单的拖拽是不改变元素所在的容器，而只改变其位置。例子如下：

复制代码
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div><!-- End container -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#dragsource" ).draggable();
})
</script>
</body>
</html>
复制代码

拖动到另一个容器

更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上，增加一个div作为容器，并应用droppable函数：

复制代码
<html>
<head></head>
<body>
<div id="container">
<div id="dragsource">
<p>拽我!</p>
</div>
</div><!-- End container -->

<div id="droppalbe" style="width: 300px;height:300px;background-color:gray">
<p>Drop here</p>
</div>


<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#dragsource" ).draggable();
$( "#droppable" ).droppable();
})
</script>
</body>
</html>
复制代码

事件监听和回显（Feedback）

运行上一个例子，你可能会产生疑惑，真的放到目标容器上了吗？用户也会产生同样的疑惑。所以，可以监听拖动过程中发生的一些事件，并用可见的方式让用户知道。这就叫做回显（Feedback）。

对于源（source)，可以监听的事件包括：

　　create: 在source上应用draggable函数时触发
　　start：开始拖动时触发
　　drap：拖动过程中触发
　　stop：释放时触发
对于目标（target）,可以监听的事件包括：
　　create: 在target上应用droppable函数时触发
　　activate：如果当前拖动的source可以drop到本target，则触发
　　deactivate：如果可以drop到本target的拖拽停止，则触发
　　over：source被拖动到target上面
　　out：source被拖动离开target
　　drop：source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递，在这些事件处理函数中就可以进行Feedback。看一下实际的例子：

复制代码
<html>
<head>

</head>
<body>
<div id="dragsource">
<p id="targetMsg">:-|</p>
</div>

<div id="droppable" style="background-color:gray;height:300">
<p>Can drop! </p>
</div>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#dragsource" ).draggable({
start: function(event,ui) {
$(this).find("p").html(":-S");
},
stop:function(event,ui){
$(this).find("p").html(":-|");
}
});

$( "#droppable" ).droppable({
activate: function(event,ui) {
$(this).find("p").html( "Drop here !" );
},
over: function(event,ui) {
$( this ).find( "p" ).html( "Oh, Yeah!" );

},
out: function(event,ui) {
$( this ).find( "p" ).html( "Don't leave me!" );

},
drop: function( event, ui ) {
$( this ).find( "p" ).html( "I've got it!" );
}
});
})
</script>
</body>
</html>
复制代码

复制拖动

前面的例子都是移动元素，另一种常见的场景是复制拖动。比如visio中的从画板中拖动元素到画布。这是通过draggable函数的helper参数设定的。

helper可以指定为“original”, "clone"，其中"original"是默认值，即拖动自身，而clone表示创建自身的一个克隆用于拖拽。helper还可以指定为函数，该函数返回一个自定义的DOM元素用于拖拽。
当不是拖动自身的时候，需要在target上指定drop事件函数，在该函数中将特定的元素添加到target容器上，否则drop的时候什么事情都不会发生。
简单复制的例子如下：

复制代码
<html>
<head></head>
<body>

<div id="dragsource">
<p>拽我!</p>
</div>
<div id="container" style="background-color:gray;height:300">
</div><!-- End container -->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#dragsource" ).draggable({
helper:"clone"
});

$("#container").droppable({
drop:function(event,ui){
$(this).append($("<p style='position:absolute;left:"+
ui.offset.left+";top:"+ui.offset.top+"'>clone</p>"));
}
});
})
</script>
</body>
</html>
复制代码

拖动控制

到目前位置，所有的例子中都可以对source随意拖动。在实际应用中经常需要对拖动行为进行控制。下面给出几个例子。

拖动方向

默认拖动方向为x,y两个方向。通过draggable的axis参数可以限制只能水平或竖直拖动。如下：

复制代码
<html>
<head></head>
<body>

<div id="dragX">
<p>－－</p>
</div>
<div id="dragY">
<p>|</p>
</div>

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#dragX").draggable({axis:"x"});
$("#dragY").draggable({axis:"y"});
});
</script>
</body>
</html>
复制代码

拖动范围

除了方向之外，还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。其中String可以为parent,document,window，Array是指定一个矩形区域（regin）的四元数组：[x1,y1,x2,y2]。下面的例子分别指定了parent和regin作为范围限制：

复制代码
<html>
<head></head>
<body>
<div id="container" style="background-color:gray;height:300">
<div id="draggable1" style="background-color:red;height:20;width:100">
<p>in parent</p>
</div>

<div id="draggable2" style="background-color:green;height:20;width:100">
<p>in regin</p>
</div>


<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#draggable1" ).draggable({containment: "parent" });
$("#draggable2").draggable({containment: [20,20,300,200] });
});
</script>
</body>
</html>
复制代码

拖动吸附

还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素，使用grid参数指定吸附到网格，如下：

复制代码
<html>
<head>
<style>
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }</style>
</head>
<body>
<div id="container" style="background-color:gray;height:300">
<div id="draggable1" class="draggable">
<p>吸附到其他可拖拽元素</p>
</div>

<div id="draggable2" class="draggable">
<p>吸附到容器</p>
</div>

<div id="draggable3" class="draggable">
<p>吸附到网格(30x30)</p>
</div>
</div><!--container-->


<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$("#draggable1").draggable({ snap: true });
$("#draggable2").draggable({ snap: "#container"});
$("#draggable3").draggable({grid: [30,30]});
});
</script>
</body>
</html>
复制代码

拖动把手（handle）

默认是整个元素都可以拖动，也可以指定元素的某个子元素作为拖动的handle，如：

复制代码
<div id="draggable">
<p>handle</p>
</div>
……
<script>
$("#draggable").draggable({handle:"p"});
</script>
复制代码

Drop限制

默认的droppable指定元素能够接受所有的drop， 但是可以通过accept参数限定只能接受某些元素的drop。accept参数的类型为一个符合jquery selector的字符串。例如：
$(".selector").droppable({ accept: '.special' })
表示只接受具有special 样式的元素。

增强用户体验

前面是实现拖拽的功能，JQueryUI还有一些参数可以增强用户体验。比如，cursor参数可以指定鼠标指针的形状，cursorAt指定鼠标指针在source的相对位置，revert可以指定当drop失败时source“飘”回原来的位置。一个组合的例子如下：

复制代码
<html>
<head>
<style>
.draggable {background-color:green; width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
.droppable { width: 300px; height: 300px; background-color:red}</style>
</head>
<body>
<div id="draggable2" class="draggable">
<p>I revert when I'm not dropped</p>
</div>

<div id="droppable" class="droppable">
<p>Drop me here</p>
</div>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function() {
$( "#draggable2" ).draggable({ revert: "invalid",cursor: "move", cursorAt: { top: 56, left: 56 } });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</body>
</html>
复制代码

小结

JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。本文介绍了常用的各种用法。更多的参数还可以参考官方网站的Draggable 和Droppable

0
顶
0
踩
分享到：
| Spring当把前台对象传递到后台时报错
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JQueryUI拖拽效果

    "JQueryUI拖拽效果"是其中的一个核心功能，它允许用户通过简单的API调用来实现元素在页面上的拖放操作。 1. **拖拽功能的实现** jQueryUI的`draggable()`方法用于将任何HTML元素变为可拖动的对象。只需在目标元素...

    jquery ui拖拽 克隆

    在本教程中，我们将深入探讨如何使用jQuery UI实现拖拽（dragging）和克隆（cloning）功能，尤其是如何在拖拽过程中实现元素的复制。 首先，要使用jQuery UI的拖拽功能，你需要在你的HTML页面中引入jQuery库和...

    jQueryUI可拖拽弹性圆形菜单.zip

    6. **拖拽功能**：jQuery UI的draggable组件允许用户拖动整个菜单，增加了菜单的灵活性和可用性。 7. **响应式设计**：为了适应不同设备和屏幕尺寸，菜单应具备响应式布局，确保在任何环境下都能正常工作。 在实际...

    bootstrap&jQueryUI例子

    在"bootstrap&jQueryUI例子"这个压缩包中，可能包含的是结合了这两个框架的示例代码或项目。这些示例通常会展示如何在同一个页面中有效地利用 Bootstrap 的布局和样式，同时引入 jQuery UI 的组件，实现更复杂的用户...

    jQuery UI组件 jQuery UI

    同时，jQuery UI 提供了许多可定制的选项，如宽度、高度、是否可拖动、关闭按钮等，以满足不同需求。 ### 开发与调试 `development-bundle`目录包含未压缩和未合并的jQuery UI资源，适合在开发过程中使用，便于...

    Jquery插件包 UI 拖拽

    为了进一步增强拖放功能，可以结合使用jQuery UI的`droppable()`方法，实现拖放目标，这样就可以创建一个接受拖动元素的区域。这在组织面板、文件管理器等应用场景中非常常见。 总之，jQuery UI的拖拽插件极大地...

    jquery ui & themes

    3. **拖放（Draggable/Droppable）**：jQuery UI实现了元素的拖放功能，允许用户将一个元素拖动到另一个元素上，常用于构建可交互的布局或者文件管理器等应用。 4. **排序（Sortable）**：这个功能允许用户对列表或...

    jQuery UI拖拽信息到Table表格特效

    综上所述，"jQuery UI拖拽到Table表格特效"是一个利用jQuery UI库实现的增强用户交互的实用功能。通过结合`draggable`和`droppable`，我们可以创建出一个直观、用户友好的界面，使用户能够轻松地将信息添加到表格中...

    jQuery UI拖拽拖放插件jquery.top-droppable

    **jQuery UI 拖拽拖放插件：jquery.top-droppable** 在Web开发中，交互性和用户体验至关重要，而拖放功能（Drag and Drop）是提升用户体验的一种有效方式。jQuery UI是一个强大的JavaScript库，提供了丰富的用户...

    jQuery UI 实现拖动滑块控制图片滚动(效果超酷)

    在本文中，我们将深入探讨如何使用jQuery UI库来实现一个独特的功能：通过拖动滑块控制图片滚动。这种效果在网页设计中可以增加互动性和用户体验，尤其适用于展示一系列图像或创建动态相册。jQuery UI是一个强大的...

    jQuery UI表格内容拖拽代码.zip

    《jQuery UI表格内容拖拽实现详解》 在Web开发中，提升用户体验往往是一个重要的目标，尤其是在处理大量数据的表格时。jQuery UI库提供了一系列强大的工具，使得开发者能够轻松实现交互式功能，例如拖放操作。本篇...

    jQuery UI Multiselect （jQuery UI 多选框）

    **jQuery UI Multiselect** 是一个基于 **jQuery UI** 框架的插件，它针对HTML的`&lt;select&gt;`元素提供了增强的多选功能。这个控件设计得更加直观且用户友好，使得用户在网页应用中进行多选操作时能有更佳的体验。它...

    jQuery ui鼠标拖动图片摇晃动画效果

    接下来，我们要创建一个可拖动的图片元素，并为其应用jQuery UI的`draggable`方法： ```html ``` ```javascript $(document).ready(function() { $("#draggable-image").draggable({ drag: function(event, ui)...

    基于jQuery UI和Bootstrap的元素拖拽

    今天我们来分享一款非常实用的jQuery插件，这个jQuery插件的功能是帮助你快速的实现网页元素拖拽功能，在拖拽过程中，元素可以自动生成网页上的对象，比如表单输入框、下拉框等。这个拖拽插件的外观是基于jQuery UI...

    jquery ui draggable拖动 demo

    `droppable`会监听目标区域，当可拖动元素被释放时触发相关回调： ```javascript $("td").droppable({ accept: "#myDiv", // 只接受id为myDiv的元素 drop: function(event, ui) { // 在这里处理元素放置到td的...

    jquery-ui.css、jquery-ui.js下载

    8. **Resizable** - 允许用户通过拖动边角调整元素大小。 在实际应用中，你需要将`jquery-ui.js`和`jquery-ui.css`链接到HTML文档中，确保在引入jQuery库之后引入它们。同时，为了优化加载速度，可以考虑使用CDN...

    jQuery UI可拖拽排序的时间行程表

    jQuery UI是jQuery的扩展，提供了许多可定制的UI组件，如对话框、滑块、日期选择器、可拖拽元素等。在时间行程表插件中，jQuery UI的拖放（Draggable）和排序（Sortable）功能被用来实现日程项的拖拽和重新排序。...

    jQuery UI可拖拽弹性圆形菜单.zip

    1. **可拖拽（Draggable）**：jQuery UI的可拖拽功能使得元素可以被用户轻易地在页面上移动。在本例中，圆形菜单按钮允许用户通过鼠标拖动改变位置，增强了用户与界面的互动性。 2. **弹出菜单（Menu）**：jQuery ...

    ,jqueryui jquery ui包 效果不错，只是为了自己保存

    **jQuery UI：一个强大的前端开发工具包** ...总之，jQuery UI是前端开发中的宝贵资源，它提供了丰富的用户界面元素，简化了开发流程，提升了用户体验。无论是初学者还是经验丰富的开发者，都可以从中受益。

    jquery ui实现拖拽

    jQuery UI是开源的，可以在官方网站（https://jqueryui.com/）下载。它包含了多个可重用的UI组件，如日期选择器、滑块、对话框和我们关注的拖放功能等。要使用jQuery UI，你需要在HTML文件中引入jQuery库和jQuery UI...

Magicbox
Global site tag (gtag.js) - Google Analytics