jquery drag and drop

赵俊晤

2023-12-01

1. drag.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .drag-area {
            width: 205px;
            height: 500px;
            background: #fff;
            display: inline-block;
            vertical-align: top;
            position: relative;
            margin-left: 30px;
            border: 1px solid #ddd;
            box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, 0.06);
        }

        .area {
            position: absolute;
            margin: 0 auto;
            color: #ccc;
            font-size: 20px;
            bottom: 10px;
            left: 20px;
        }

        .box {
            width: 200px;
            height: 20px;
            background: #37A3CF;
            color: #fff;
            text-align: center;
            z-index: 2;
            border: 2px solid #37A3CF;

        }

        .result {
            display: inline-block;
            margin-left: 30px;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="drag.js"></script>
</head>
<body>
    <div>
        <div class="drag-area">
            <div class="area">Select Items</div>
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box">box4</div>
            <div class="box">box5</div>
            <div class="box">box6</div>
            <div class="box">box7</div>
            <div class="box">box8</div>
        </div>
        <div class="drag-area">
            <div class="area">Enable</div>
        </div>
        <div class="drag-area">
            <div class="area">Disable</div>
        </div>
        <div class="drag-area">
            <div class="area">Remove</div>
        </div>
        <div class="result">-</div>
    </div>
</body>
</html>

2. drag.js

$(function () {
    $(".box").draggable({
        scope: 'demoBox',
        revertDuration: 100,
        start: function (event, ui) {
            //Reset
            $(".box").draggable("option", "revert", true);
            $('.result').html('-');
        }
    });

    $(".drag-area").droppable({
        scope: 'demoBox',
        drop: function (event, ui) {
            var area = $(this).find(".area").html();
            var box = $(ui.draggable).html();
            $(".box").draggable("option", "revert", false);

            //Display action in text
            $('.result').html("[Action] <b>" + box + "</b>" +
                " dropped on " +
                "<b>" + area + "</b>");

            //Realign item
            $(ui.draggable).detach().css({top: 0, left: 0}).appendTo(this);
        }
    })

});

参考：https://codepen.io/jalenchu/pen/qwORXB

jquery drag and drop

相关阅读

相关文章

相关问答