开发者

Jquery droppable option breaks the draggable behavior of that element

开发者 https://www.devze.com 2023-04-06 17:22 出处:网络
If I specify the accept option for a droppable that is also draggable this breaks the draggable behavior of that droppable.

If I specify the accept option for a droppable that is also draggable this breaks the draggable behavior of that droppable.

To prevent nesting of these draggable droppables, I specify the accept option to be only the class that belongs in the droppable. I do this with $('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });. Here is the javascript where I specify the droppable draggable div.

    // Define more LinkCard options
    $('#'+card_id).css('width',350);
    $('#'+card_id).css('height',250);
    $('#'+card_id).resizable();
    $('#'+card_id).draggable();
    $('#'+card_id).draggable("option", "handle", '.linkcard_header');
    $('#'+card_id+' p').editableText();
    $('#'+card_id).draggable({ stop: function(event, ui) { update_linkcard_xml(card_id) } });

    // Make droppable
    $('div.link_drop_box', $('#'+card_id)).droppable({ 开发者_如何学Goaccept: '.link' });
    $('div.link_drop_box', $('#'+card_id)).droppable({
        drop: function( event, ui ) {
            var $item = ui.draggable;
            $item.fadeOut(function() {

            $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
        }); 
        $item.appendTo( this );
        }
    });

Now the droppable divs aren't draggable anymore. The strange behavior is that there are several such droppable divs. The first one is still draggable, the the others are not. What could cause the accept option to break the draggable behavior.


Found the problem. Should put all the options in one droppable Method. The following works.

    $('div.link_drop_box', $('#'+card_id)).droppable({
       drop: function( event, ui ) {
          var $item = ui.draggable;
          $item.fadeOut(function() {
             $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
          }); 
          $item.appendTo( this );
          /* update_links_xml("card_id"); */
       },
       out: function( event, ui ) {
          /* update_links_xml("card_id"); */ 
       },
       accept: ".link",
     });
0

精彩评论

暂无评论...
验证码 换一张
取 消