一、drawing的用法
在介绍jquery中的draggable用法之前,我们先了解一下在HTML5中提供的draggable属性。使用这个属性可以让元素变得可拖拽,但是要注意的是,仅仅加上这个属性,元素并不会自动拖拽,还需要通过JavaScript来实现拖拽的效果。draggable属性有三个取值,分别为true(默认值)、false和auto。其中,当取值为auto时,元素只能在容器内进行拖拽,不能跨越容器边缘。
<div draggable="true"> 可拖拽的元素 </div>
二、jQuery中draggable的用法
jQuery UI是一个jQuery的扩展库,其中包含了draggable插件,可以方便地实现元素的拖拽效果。在使用之前,需要先引入jQuery库和jQuery UI库,代码如下:
<!-- 引入 jQuery 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 引入 jQuery UI 库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
然后,我们就可以使用draggable插件来实现元素的拖拽效果,代码如下:
$(function() { $("#element").draggable(); });
其中,$("#element")表示要被拖拽的元素的选择器,draggable()是draggable插件提供的方法。
此外,我们还可以通过配置参数来控制拖拽的效果,代码如下:
$(function() { $("#element").draggable({ containment: "parent", // 限制拖拽范围为父元素 cursor: "move" // 鼠标指针样式为move }); });
其它可以配置的参数还包括方向、拖拽开始和结束的回调函数等。
三、drag的用法
在jQuery UI中,除了draggable插件,还有一个可拖拽的插件叫做drag。它们两个的主要区别在于,draggable是用来实现元素拖拽的,而drag则是用来实现数据的拖拽。当你需要在不同的元素之间拖拽数据时,可以使用drag插件。
要实现数据拖拽,我们需要先设置数据源(也就是要被拖拽的数据),并添加一个可拖拽的handle元素。代码如下:
$(function() { $.widget("custom.draggable", $.ui.mouse, { _create: function() { this.element.addClass("custom-draggable-container"); this.handle = $("").addClass("handle"); this.element.append(this.handle); this._on(this.handle, { mousedown: "_start" }); }, _start: function(event) { var self = this; this._mouseDownEvent = event; var options = { helper: "clone", // 使用clone模式 appendTo: "body", // 拖拽时将helper元素插入到body中 revert: false // 拖拽结束后不回到原位置 }; var draggableData = { data: this.element.data(), start: this._mouseDownEvent }; $.extend(options, draggableData); this.helper = $("") .addClass("custom-draggable-helper") .appendTo(options.appendTo) .css({ left: event.pageX, top: event.pageY }); this._addClass(this.helper, null, "ui-draggable-helper"); this._trigger("start", event); var that = this; $.when(this._mouseCapture(event)) .done(function() { that._mouseDrag(event, true); }) .fail(function() { event.stopPropagation(); that._trigger("cancel", event); }); }, _mouseDrag: function(event, noPropagation) { if (this.helper && event.which) { this.helper .css({ left: event.pageX, top: event.pageY }); this._trigger("drag", event); } return false; }, _stop: function(event) { if (this.helper) { this.helper.remove(); this.helper = null; } this._trigger("stop", event); if (!this.options.revert) { return false; } var that = this, element = this.element, $target = $(event.target), validDrop = false; if ($target.droppable("instance")) { // 如果鼠标所在的位置在droppable元素里,那么就触发drop事件。 $target.droppable("instance")._drop(that.event); validDrop = true; } if (!validDrop) { element.animate(that.originalPosition); } return !event.cancelBubble; } }); $(".custom-draggable-container").draggable(); });
上面的代码实现的是可拖拽数据的基本功能,并且使用了clone模式,使得拖拽过程中的元素为拖拽元素的一个副本,拖拽结束后拖拽元素不会回到原位。在使用的时候只需将可拖拽的元素加上custom-draggable-container这个class即可。
四、draggable属性
除了draggable插件和drag插件,jQuery UI还提供了一些与draggable相关的属性。下面我们同样通过代码来了解这些属性的用法。
1. axis属性
axis属性可以控制元素的拖拽方向,可以取值为"x"、"y"或空。如果取值为"x",元素只能沿水平方向拖拽;如果取值为"y",元素只能沿垂直方向拖拽;如果不设置,元素能够沿任意方向拖拽。
$(function() { $("#element").draggable({ axis: "x" }); });
2. containment属性
containment属性可以控制元素的拖拽范围。可以取值为parent、document、window或一个选择器的字符串。分别表示元素只能在其父元素内进行拖拽、只能在文档内进行拖拽、只能在浏览器窗口内进行拖拽,以及只能在某个选择器所表示的元素内进行拖拽。
$(function() { $("#element").draggable({ containment: "document" }); });
3. handle属性
handle属性可以指定元素的某个子元素作为拖拽的触发元素,这个子元素被称作“handle”。只有在handle部分按下鼠标才能拖拽整个元素。
$(function() { $("#element").draggable({ handle: ".handle" }); });
五、draggable用法示例
下面,我们来看一个实际的使用案例。这是一个拖拽图片的效果,图片可以被拖拽到放置区域。代码如下:
<!DOCTYPE html> <html> <head> <title>draggable用法示例</title> <meta charset="utf-8"> <style> .img-container { margin: 20px; width: 500px; height: 400px; border: 2px dashed gray; position: relative; cursor: pointer; } .img-placeholder { width: 500px; height: 400px; position: absolute; top: 0; left: 0; } .img-placeholder img { opacity: 0.5; position: absolute; top: 0; left: 0; } </style> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script> $(function() { $("#img").draggable({ helper: "clone", revert: "invalid" }); $(".img-placeholder").droppable({ accept: "#img", drop: function(event, ui) { var $img = $(ui.helper).clone(); $img.css({ position: "absolute", top: ui.offset.top - $(this).offset().top, left: ui.offset.left - $(this).offset().left, opacity: 1 }).appendTo(this); } }); }); </script> </head> <body> <div class="img-container"> <div class="img-placeholder"></div> <img id="img" src="https://cdn.jsdelivr.net/gh/jquery/jquery-ui@1.12.1/themes/smoothness/images/ui-icons_222222_256x240.png"> </div> </body> </html>
当用户在图片上按下鼠标时,会出现一个副本跟随鼠标移动,当鼠标移动到放置区域并释放鼠标时,副本会在放置区域出现一张新的图片。
六、总结
本文介绍了draggable的用法,包括HTML5中的draggable属性、jQuery UI中的draggable插件、drag插件以及与draggable相关的一些属性。同时,我们还通过一个实际的案例,展示了draggable的具体应用场景。通过学习本文,相信读者对draggable的掌握已经足够熟练了。