logo标签列表

当使用jquery-ui Droppable时，为什么接受事件在某人开始拖动可拖动的对象时立即触发？

jqueryjquery-ui-droppable
4
我有一个页面，其中包含大量的jquery UI拖拽项和大量的可放置项。 我想要一些自定义逻辑来确定可放置项是否接受某个可拖动项，所以我编写了一些逻辑{{link2：在可放置项的“accept”事件中}}。它起作用了，但我注意到这个事件会在您开始拖动项目时立即触发，并且会同时为所有可放置项触发。
这似乎非常低效。我认为当您悬停在单个可放置项上时，它应该只对单个可放置项进行正确处理，但情况似乎并非如此。你认为它被编码成这样的原因是什么（因为如果我有100个可放置项，即使用户只尝试拖放到一个可放置项中，它也会触发100次），并且，是否有任何方法可以实现我想要的行为。
我考虑在拖放事件中加入逻辑来进行检查并删除可拖动项（模拟不接受它），但问题在于您不会得到任何漂亮的“还原”动画，因此看起来有点不一致（与基于接受事件所看到的相比）。
您有什么想法，可以插入一些自定义逻辑，但不会浪费循环在每个可放置上，同时仍然获得还原动画？
4
我在可放置元素中看到了接受选项，但并没有像你所描述的接受事件。 - j08691
“accept”事件难道不只是一个过滤器，用于确定某个项目是否可拖动吗？ - megawac
@megawac - 是的，但如果我有100个可拖动的物品，当我拖动一个可拖动的物品时，它会触发100次...也许我高估了这种情况的开销。 - leora
2
你能否创建一个小的代码片段来演示事件的重复触发吗？我不知道你所描述的“accept”事件。谢谢。 - Trevor
2
你能提供一个jsfiddle吗？ - Dom
显示剩余3条评论
2个回答
2
我认为开销并不大，但如果你想要另一种解决方案：在开始时获取可拖动元素的起始位置，并将其保存在元素的data()中。在放置操作中进行逻辑检查。如果失败，将元素动画返回到起始位置。这将确保事件仅针对正在拖动和可放置的元素。 http://jsfiddle.net/samnunnally/sgy29/2/ 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>droppable demo</title>
<link rel="stylesheet"
    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>

#notAllowed {
    width: 100px;
    height: 100px;
    background: #ccc;
}

#allowed {
    width: 100px;
    height: 100px;
    background: red;
}

#droppable {
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: #999;
    color: #fff;
    padding: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
    <div id="droppable" >Drop here</div>
    <div id="notAllowed" >not allowed to drop</div>
    <div id="allowed">allowed to drop</div>
    <script>

        function capturePosition(event, ui) {

            ui.helper.data( 'startPosition', ui.position);
        }
$( document ).ready(function() {

        $("#notAllowed").draggable({
            start : capturePosition
        });

        $("#allowed").draggable({
            start : capturePosition
        });

        $("#droppable").droppable({
            drop : function(event, ui) {
                //do logic to determine if it can be dropped
                if(ui.draggable.attr('id') == 'notAllowed'){
                   var startPosition = ui.draggable.data('startPosition');
                   ui.draggable
                    .animate({ 
                    'left': 
                    '+='+ (startPosition.left - ui.draggable.offset().left + $('body').offset().left) + 'px' }, 
                    'slow' )

                    .animate({
                    'top': 
                    '+='+ (startPosition.top - ui.draggable.offset().top + + $('body').offset().top) + 'px' }, 
                    'slow' );
                }
            }
        });
}
    </script>
</body>
</html>
1
也许这可以帮助您：
查看此Fiddle代码（模拟不接受或接受）。

http://jsfiddle.net/penjepitkertasku/VYQcW/8/

这将确保事件仅针对正在拖动和可放置的元素。
$(function() {

    //global
    var dname = "";

    //position
    var d1left = $("#droppable1").position().left + 20;
    var d1top = $("#droppable1").position().top + 30;
    $("#draggable1").css({'position': 'absolute', 'left': (d1left*1) + 'px', 'top': ((d1top*1)+15) + 'px'});
    $("#draggable2").css({'position': 'absolute', 'left': (d1left*1) + 'px', 'top': ((d1top*2)+20) + 'px'});

    //checkbox
    $(".checkbox").change(function(){
        $(this).next().text(this.checked === true ? 'invalid' : 'valid');
    });

    //drag
    $("#draggable1").draggable({ revert: 'valid' });
    $("#draggable2").draggable({ revert: 'invalid' });

    //event
    $(".draggable").mousedown(function(){
        dname = this.id;
    });

    //drop
    $("#droppable1, #droppable2").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            console.log(dname);
            var _checboxid = $("#" + dname + ' input[type=checkbox]');
            var _revert = _checboxid.is(':checked') ? 'invalid' : 'valid';
            $("#" + dname).draggable("option", "revert", _revert);
        },
        out: function( event, ui ) {
            $("#" + dname).draggable("option", "revert", "invalid");
        }
    });
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接