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ínhsử dụng
scrollKhi kéo ra khỏi độ lớn của khung chứa thì tự động scroll theo không? (true/false)
axisQuá trình kéo thả bị dính cứng theo chiều nào? x là ngang và y là dọc
containmentGiớ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
revertKhi di chuyển xong có tự động quay về vị trí cũ không? (true/false)
helperCách kéo thả. clone là tạo ra một bản sao để di chuyển, mặc định là orginal
startBắ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)
stopKết thúc di chuyển sẽ làm gì? (tên Function sẽ được gọi)
disableBằng true thì không thể thao tác