Question

所以，我正在创建一个小小的HTML游戏＆＃39;您可以将不同的项目拖放到某个位置。这是一款可以制作汉堡的游戏。现在我想要一种方法来移动不同的div（你将div上的图像拖到它们上面），当有人拖动它们时。所以他们不能重叠，总是回到同一个地方。

我目前有这个：http://steal.wordquest.nl/drag

`

<title>Restaurant simulator</title>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

<div class="container">


    <style>
        body {
            background: #fff;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        #draggable,
        #draggable2,
        #draggable3 {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            float: left;
            margin: 10px 10px 10px 0;
            background: white;
            border: 2px solid green;
            background-size: contain;
        }

        #droppable {
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }

        .dropped {
            background: white;
            color: black;
        }
    </style>
    <script>
        $(function() {
            $("#draggable").draggable();
            $("#draggable2").draggable();
            $("#draggable3").draggable();
            $("#droppable").droppable({
                drop: function(event, ui) {
                    $(this)
                        .addClass("dropped")
                        .find("p")
                        .html("Dropped!");
                }
            });
        });
    </script>



    <div class="demo">

        <div id="draggable" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')">
            <!--         <p>Drag me to my target</p> -->
        </div>

        <div id="draggable2" class="ui-widget-content" style="background-image: url('/images/food/Meat.png')"></div>

        <div id="draggable3" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')"></div>

        <div id="droppable" class="ui-widget-header">
            <p>Drop here</p>
        </div>

    </div>
    <!-- End demo -->



    <div class="demo-description" style="display: none; ">
        <p>Enable any DOM element to be droppable, a target for draggable elements.</p>
    </div>
    <!-- End demo-description -->



</div>

`

Answer 1

你必须使用＆＃39;还原＆＃39;可拖动以恢复div位置。

$(function() { $("#draggable").draggable({ revert : function(event, ui) { // on older version of jQuery use "draggable" // $(this).data("draggable") // on 2.x versions of jQuery use "ui-draggable" // $(this).data("ui-draggable") $(this).data("uiDraggable").originalPosition = { top : 0, left : 0 }; // return boolean return !event; // that evaluate like this: // return event !== false ? false : true; } }); $("#droppable").droppable(); });

Answer 2

嗯......可能有点过早问了一个问题。我找到了答案：我稍微升级了代码，它现在检测到已删除项目的ID。希望我帮助过某个人。

我现在有了这个：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='dragdrop.js'></script>
<script src='http://livejs.com/live.js'></script>

<title>Restaurant simulator</title>

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>

<div class="container">


    <style>
        body {
            background: #fff;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        .draggable {
            width: 100px;
            height: 100px;
            padding: 0.5em;
            left: 0;
            float: left;
            margin: 10px 10px 10px 0;
            background: white;
            border: 2px solid green;
            background-size: contain;
            z-index: 10;
        }

        #droppable {
            position: absolute;
            left: 600px;
            width: 150px;
            height: 150px;
            padding: 0.5em;
            float: left;
            margin: 10px;
        }

        .dropped {
            background: white;
            color: black;
        }
    </style>
    <script>

        var num = 0;
        var draggableId;

        $(function() {
            //Make items dragable
            $("#draggable").draggable();
            $("#draggable2").draggable();
            $("#draggable3").draggable();
            $("#draggable4").draggable();
            $("#droppable").droppable({
                drop: function(event, ui) {
                    //Change counter one higher, for test purposes
                    num = num + 1;
                    //Get ID of dropped item
        draggableId = ui.draggable.attr("id");
                    $(this)
                    //Change look of drop-spot(gonna remove this someday)
                        .addClass("dropped")
                    //Change name of drop-spot
                        .find("p")
                        .html("Dropped!<br>Count: " + draggableId);

                    //change position of dropped item
                        $("#" + draggableId).css({left: 0, top: 0});
                }
            });


        });
    </script>



    <div class="demo">

        <!--            Dingen die kunnen worden gedropt -->
        <div class='draggable'  id="draggable" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')">
            <!-- <p>Drag me to my target</p> -->
        </div>
        <div class='draggable' id="draggable2" class="ui-widget-content" style="background-image: url('/images/food/Meat.png')"></div>
        <div class='draggable'  id="draggable3" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')"></div>
        <div class='draggable'  id="draggable4" class="ui-widget-content" style="background-image: url('/images/food/Sla.png')"></div>

        <!--            Plek waar je dingen op moet droppen -->
        <div id="droppable" class="ui-widget-header">
            <p>Drop here</p>
        </div>
    </div>
    <!-- End demo-description -->
</div>

HTML - 拖放 - 如果未在特定位置删除，则移回项目

2 个答案: