一、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/zh-hant/n/270060.html
微信掃一掃 
支付寶掃一掃 