Question

我正在使用jquery拖放功能的动态公式生成器到目前为止我所做的是

我有两个2列表

<ul id="head">
    <li class="horizontal">Salary</li>
    <li class="horizontal">Workers</li>
    <li class="horizontal">Perday</li>
</ul>

和

<ul id="operations">
    <li class="horizontal">Add +</li>
    <li class="horizontal">Sub -</li>
    <li class="horizontal">Multiply *</li>
    <li class="horizontal">Divide /</li>
</ul>

该过程是用户将首先从第一个列表拖放并放入droppable div，他们将从操作列表中添加任何内容，如（+， - etc ..）。我用过的Jquery：

$('#head li').draggable({
    cursor: 'move',
    helper: 'clone',
    connectToSortable: "#drop",
});
$("#drop").droppable({
    drop: function (event, ui) {
        $(this)
            .removeClass("ui-droppable ui-sortable")
            .addClass("horizontal ui-draggable ui-draggable-handle")
    }
}).sortable();

droppable div

<div  id="drop" style="border:2px solid;min-height:100px;"></div>

我的问题是我必须验证用户不应该一次删除多个操作。 ex：Multiply * Add + 这是错误的。操作必须介于两个文本之间。那么我怎么能在这个可投放的div（drop）中找到之前添加的值。提前致谢

Answer 1

如何使用一些数据属性来识别你的操作，用js中的变量来存储最后丢弃的内容，如下所示：

<强> HTML

<div class='js-droppable' data-drop-type='op'>operation 1</div>

<强> JS

var lastDropped = '';

var processDroppable = function () {
    var dropped = $(this).data('drop-type');

    if (lastDropped == 'op' && dropped == 'op') {
        console.log('not allowed')
    } else {
        console.log('you may drop ...');
    }

    lastDropped = dropped;
}

$('.js-droppable').click(processDroppable);

data属性存储droppable的类型，然后用于捕获任何不允许的重复droppable。

您可以根据识别您的droppables来做任何逻辑，但lastDropped == 'op' && dropped == 'op'涵盖了问题中的案例。

工作示例为here in JSFiddle，为了简单起见，我使用了click个事件而不是dropped个事件;打开控制台以查看输出。

如何从droppable div中找到先前删除的值

1 个答案: