Demo : https://www.lenlop123.com/2020/08/21-draggable-jquery-ui.html
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
.div_draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
z-index: 2;
}
</style>
<div id="div_draggable1" class="div_draggable" style="background-color: brown;">
<p>div drag default</p>
</div>
<div id="div_draggable_x" class="div_draggable" style="background-color: chartreuse;">
<p>div drag axis x</p>
</div>
<div id="div_draggable_y" class="div_draggable" style="background-color: chartreuse;">
<p>div drag axis y</p>
</div>
<div id="div_draggable_scroll_f" class="div_draggable" style="background-color:rgb(177, 177, 241);">
<p>div drag scroll false</p>
</div>
<div id="div_draggable_scroll_t" class="div_draggable" style="background-color:rgb(177, 177, 241);">
<p>div drag scroll true</p>
</div>
<div style="clear: both;"></div>
<div id="div_containment" style="background-color: aqua; width: 300px;height: 300px;;">
<div id="div_draggable_containment" class="div_draggable" style="background-color: brown;">
<p>div drag containment</p>
</div>
</div>
<div id="div_draggable_cancel" class="div_draggable" style="background-color:rgb(177, 177, 241);">
<p>div drag cancel</p>
<div id="div_draggable_canceldrag" style="width:100%;height: 40px;background-color: deepskyblue;">text area can`t be
dragged</div>
</div>
<div style="clear: both;"></div>
<div id="div_draggable_revert" class="div_draggable" style="background-color: rgb(128, 177, 177);">
<p>div drag revert true</p>
</div>
<div id="div_draggable_revertDuration" class="div_draggable" style="background-color: rgb(128, 177, 177);">
<p>div drag revertDuration 2000</p>
</div>
<div id="div_draggable_helper" class="div_draggable" style="background-color: rgb(211, 158, 186);">
<p>div drag helper</p>
</div>
<div id="div_draggable_start" class="div_draggable" style="background-color:darkkhaki">
<p>div drag start/stop/drag<br>console.log</p>
</div>
<div id="div_draggable_disable" class="div_draggable" style="background-color:goldenrod">
<p>div drag disable</p>
</div>
<div id="div_draggable_opacity" class="div_draggable" style="background-color:darkslateblue">
<p>div drag opacity </p>
</div>
<script>
$(function () {
// 1. draggable
$("#div_draggable1").draggable();
// 2. draggable axis - Quá trình kéo thả bị dính cứng theo chiều nào? x là ngang và y là dọc
$("#div_draggable_x").draggable({
axis: "x"
});
$("#div_draggable_y").draggable({
axis: "y"
});
// Getter
var axis = $("#div_draggable_x").draggable("option", "axis");
// Setter
$("#div_draggable_x").draggable("option", "axis", "x");
// 3. draggable - Khi kéo ra khỏi độ lớn của khung chứa thì tự động scroll theo không? (true/false)
$("#div_draggable_scroll_f").draggable({
scroll: false
});
$("#div_draggable_scroll_t").draggable({
scroll: true
});
// Getter
var scroll = $(".div_draggable_scroll_f").draggable("option", "scroll");
// Setter
$(".div_draggable_scroll_f").draggable("option", "scroll", false);
// 4. containment - Giới hạn vùng di chuyển, là một thẻ HTML khai báo bằng selector hoặc parent để chỉ cha của đối tượng
// "parent", "document", "window".
$("#div_draggable_containment").draggable({
containment: "parent",
});
// Getter
var containment = $(".div_draggable_containment").draggable("option", "containment");
// Setter
$(".div_draggable_containment").draggable("option", "containment", "parent");
// 4B. Cancel - vùng không thể nhấn vào để kéo
$("#div_draggable_cancel").draggable({
cancel: "#div_draggable_canceldrag"
});
// Getter
var cancel = $(".draggable").draggable("option", "cancel");
// Setter
$(".draggable").draggable("draggable", "cancel", ".div_draggable_canceldrag");
// 5. revert - Khi di chuyển xong có tự động quay về vị trí cũ không? (true/false)
$("#div_draggable_revert").draggable({
revert: true
});
$("#div_draggable_revertDuration").draggable({
revert: true,
revertDuration: 2000
});
// Getter
var revert = $(".div_draggable_revert").draggable("option", "revert");
// Setter
$(".div_draggable_revert").draggable("option", "revert", true);
// 6. helper - Cách kéo thả. clone là tạo ra một bản sao để di chuyển, mặc định là orginal
$("#div_draggable_helper").draggable({
helper: "clone"
});
// Getter
var helper = $(".div_draggable_helper").draggable("option", "helper");
// Setter
$(".div_draggable_helper").draggable("option", "helper", "clone");
// 7. start - Bắt đầu di chuyển sẽ làm gì? (tên Function sẽ được gọi)
// stop - Kết thúc di chuyển sẽ làm gì? (tên Function sẽ được gọi)
$("#div_draggable_start").draggable({
start: function (event, ui) {
console.log("div_draggable start");
},
stop: function (event, ui) {
console.log("div_draggable stop");
},
drag: function (event, ui) {
// Keep the left edge of the element
// at least 100 pixels from the container
ui.position.left = Math.min(100, ui.position.left);
console.log("div_draggable drag :" + ui.position.left + "," + ui.position.top);
}
});
// 8. helper - Cách kéo thả. clone là tạo ra một bản sao để di chuyển, mặc định là orginal
$("#div_draggable_disable").draggable({
disabled: true
});
// Getter
var disabled = $(".div_draggable_disable").draggable("option", "disabled");
// Setter
$(".div_draggable_disable").draggable("option", "disabled", true);
// 9. opacity - khi kéo chỉnh mờ đối tượng kéo
$("#div_draggable_opacity").draggable({
opacity: 0.35
});
// Getter
var opacity = $(".selector").draggable("option", "opacity");
// Setter
$(".selector").draggable("option", "opacity", 0.35);
});
</script>
Draggable
thuộc tính | sử dụng |
---|---|
scroll | Khi kéo ra khỏi độ lớn của khung chứa thì tự động scroll theo không? (true /false ) |
axis | Quá trình kéo thả bị dính cứng theo chiều nào? x là ngang và y là dọc |
containment | Giới hạn vùng di chuyển, là một thẻ HTML khai báo bằng selector hoặc parent để chỉ cha của đối tượng |
revert | Khi di chuyển xong có tự động quay về vị trí cũ không? (true /false ) |
helper | Cách kéo thả. clone là tạo ra một bản sao để di chuyển, mặc định là orginal |
start | Bắt đầu di chuyển sẽ làm gì? (tên Function sẽ được gọi ) |
drag | Đang di chuyển sẽ làm gì? (tên Function sẽ được gọi ) |
stop | Kết thúc di chuyển sẽ làm gì? (tên Function sẽ được gọi ) |
disable | Bằng true thì không thể thao tác |
0 Nhận xét