一、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的掌握已经足够熟练了。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270060.html
微信扫一扫 
支付宝扫一扫 