Question

我对任何脚本都很陌生，刚开始接触 JS，请不要判断太苛刻。

我需要制作一个用户可以拖入右侧列表（购物车）的项目列表。如果我拖放项目，它们会相互重叠。我发现有 JQuery UI 可以解决它，但我的代码有问题。

如何防止可拖动项发生碰撞？

<html>
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/StyleSheet.css" rel="stylesheet" />
    <title></title>
    <style>
        .list,.cart{
            height:480px;
        }
        img{
            width:150px;
        }
        #source{
            width:150px;
        }
    </style>
</head>
<body>
    <div class="col-12 p-1">
        <div class="list col-6 bg-info float-left p-1">
            <div id="source" draggable="true">
                <img src="img/apple.png" />
            </div>
            <div id="source" draggable="true">
                <img src="img/banana.png" />
            </div>
            <div id="source" draggable="true">
                <img src="img/carrot.png" />
            </div>
            <div id="source" draggable="true">
                <img src="img/cucumber_PNG84281.png" />
            </div>

        </div>
        <div id="target" class="cart col-6  bg-light float-right rounded">
            Drag items here
        </div>
        <div class="col-12">

        </div>
    </div>


    <script>
        window.onload = function () {
            var source = document.getElementById("source");
            source.addEventListener('dragstart', function (evt) {
                this.style.border = "3px dotted #000";
                evt.dataTransfer.effectAllowed = "move";
                evt.dataTransfer.setData("Text", this.id);
            }, false);
            source.addEventListener("dragend", function (evt) {
                this.style.border = " ";
            }, false);

            var target = document.getElementById("target");
            target.addEventListener("dragenter", function (evt) {
                this.style.border = "3px solid red";
            }, false);
            target.addEventListener("dragleave", function (evt) {
                this.style.border = " ";
            }, false);
            target.addEventListener("dragover", function (evt) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                }
                return false;
            }, false);
            target.addEventListener("drop", function (evt) {
                if (evt.preventDefault) {
                    evt.preventDefault();
                }
                if (evt.stopPropagation) {
                    evt.stopPropagation();
                }
                this.style.border = " ";
                var id = evt.dataTransfer.getData("Text");
                var elem = document.getElementById(id);
                this.appendChild(elem);
                return false;
            }, false);
            var $ = function (selector) {
                return document.getElementById(selector);
            }
            $("#source").draggable({
                preventCollision: true,
                containment: "#target"
            });
        }
    </script>

    <script src="scripts/collision.js"></script>
    <script src="scripts/jquery-3.0.0.min.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/jquery-1.8.3.min.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/ui/jquery.ui.core.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/ui/jquery.ui.widget.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/ui/jquery.ui.mouse.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/ui/jquery.ui.draggable.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/jquery-collision.min.js"></script>
    <script src="scripts/jquidragcollide1.0.2min/jquery-ui-draggable-collision.js"></script>
    <script src="scripts/popper.min.js"></script>
    <script src="scripts/bootstrap.min.js"></script>
</body>
</html>

拖放防止碰撞

0 个答案: