javascript拖放-防止元素拖放到另一个droppable元素中

debugcn 发表于 Dev

普罗洛姆兹

标题说明了这一点-如果我将fisrt元素放置在“井”中，则第二个可放置元素可以放置在第一个元素内。另外，我还需要防止多个元素掉入同一“孔”中。HTML是这样的：

 <div class="container-fluid">
    <div class="row">
        <table class="table">
            <tbody>
                <tr>
                    <td>Word 3</td>
                    <td><div class="well" style="max-width: 200px;" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                    <td><div class="btn btn-primary" id="drag1" draggable="true" ondragstart="drag(event)" width="336" height="69">Move 1</div></td>
                </tr>
                <tr>
                    <td>Word 2</td>
                    <td><div class="well" style="max-width: 200px;" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                    <td><div class="btn btn-primary" id="drag2" draggable="true" ondragstart="drag(event)" width="336" height="69">Move 2</div></td>
                </tr>
                <tr>
                    <td>Word 1</td>
                    <td><div class="well" style="max-width: 200px;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
                    <td><div class="btn btn-primary" id="drag3" draggable="true" ondragstart="drag(event)" width="336" height="69">Move 3</div></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JS是这样的：

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
    stop();
}

先知

为此，请使用Jquery UI，因为实现非常简单。

定义一个可放置的对象：

$( ".selector" ).droppable({
    accept: ".special" // .selector will only allow elements to be dropped on it that the class .special
});

要进行更新：

$( ".selector" ).droppable( "option", "accept", ".special2" );

要使元素可拖动：

// Allow elements with class .selector to be dragged
$( ".selector" ).draggable( "enable" );

要进行更新：

// Disable dragging for elements with class .selector
$( ".selector" ).draggable( "disable" );

在您的情况下，您可以启用所有这三个元素：

$( "#drag1, #drag2, #drag3" ).draggable( "enable" );
// Make #drag1 one droppable, accepts #drag2
$( "#drag1" ).droppable({
    accept: "#drag2"
});
// So so on so forth...

无论您要实现哪种类和元素，都可以复制这几行内容。它比具有所有属性和功能的JavaScript版本要容易得多。

确保包括：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

文件：

可滴下的

可拖动

教程

如有疑问请发表评论

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。