Geek Answers Handbook

When using jquery-ui Droppable, why does the receiving event fire when someone starts dragging and dropping?

I have a page with lots of jquery UI draggables and lots of droppable s. I wanted some kind of user logic to determine if droppable would accept some draggable, so I coded some logic in the "accept" event for droppable . It worked, but one thing I noticed is that this event fires when you start dragging an item and it fires for all droppables at that time.

It seems very inefficient. I thought this would be true for one right right when you hover, but that doesn't seem to be the case. Is there any reason why you think it is encoded in this way (since it seems very inefficient, as if I had 100 droppables, it would fire 100 times, even if the user only tries to drag into one droppable) and also if there is a way there is the behavior that I want.

I was thinking about putting the logic in the drop event in order to do my check and remove the dragged item (to simulate not accepting it), but the problem is that you are not getting any of these nice animations to “return”, so it looks a bit inconsistently (compared to what you see if you use the accept event)

Any thoughts on how I can still plug in some kind of user logic, but not waste cycles to shoot for each individual right when I move something (and still get reverse animation)?

+4
source share
2 answers

I do not think that the overhead is so great, but if you need an alternative solution: take the starting position of the dragged item at startup and save it in the item () item. Perform a logical check in the reset procedure. If this fails, animate the element back to startPosition. This will ensure that events are specific to the item being dragged and droppable only.

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>
+2

, :

. ( )

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

, , droppable

$(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");
        }
    });
});
+1

More articles:


All Articles