Question

我有一个差不多完成的谜题。唯一的问题是，当他们靠近掉落处时，我需要抓住拼图瓷砖。例如，第1件靠近放置位置，然后该放置位置必须“抓住”。那块，也放在下落的中间。我已经尝试用css和html来做这件事，但它没有用。

<script type="text/javascript">
$(document).ready(function() {
    $(".reset").click(function() {
        location.reload();
    });
    $("img").draggable()
    $(".droplvl1").droppable({
        drop: function(event, ui) {
            $(this).addClass("ui-state-highlight").find("img");
        }
    });
});
</script>
</head>

<body>
    <h1>Jquery Puzzel</h1>
    <br>
    <a class="Levels" href="Level1.html">Level 1</a>
    <a class="Levels" href="Level2.html">Level 2</a>
    <a class="Levels" href="Level3.html">Level 3</a>
    <a class="Levels" href="Level4.html">Level 4</a>
    <a class="Levels" href="Level5.html">Level 5</a>
    <br>
    <br>
    <br>
    <img id="puzlvl1.1" data="puzdrop1.1" class="puz1" src="images/lvl1.1.jpg">
    <img id="puzlvl1.2" class="puz1" src="images/lvl1.2.jpg">
    <img id="puzlvl1.3" class="puz1" src="images/lvl1.3.jpg">
    <img id="puzlvl1.4" class="puz1" src="images/lvl1.4.jpg">
    <br>
    <br>
    <br>
    <div id="KaderLevel1">
        <table id="PuzTabel">
            <tr>
                <td id="puzdrop1.1" data="puzlvl1.1" class="droplvl1 droppable ui-droppable"></td>
                <td id="puzdrop1.2" class="droplvl1 droppable ui-droppable"></td>
            </tr>
            <tr>
                <td id="puzdrop1.3" class="droplvl1 droppable ui-droppable"></td>
                <td id="puzdrop1.4" class="droplvl1 droppable ui-droppable"></td>
            </tr>
        </table>
    </div>
    <br>
    <br>
    <br>
    <button class="reset">
        RESET
    </button>
    <br>
    <br>
    <br>
    <a class="Levels" href="Puzzel.html">Home</a>
    <br>
</body>

如何通过拖放抓住拼图瓷砖？

0 个答案: