Question

如果我为可拖放的droppable指定accept选项，则会破坏该dropable的可拖动行为。

为了防止嵌套这些可拖动的droppable，我将accept选项指定为只属于droppable的类。我用$('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });执行此操作。这是我指定droppable draggable div的javascript。

    // 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({ accept: '.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 );
        }
    });

现在可放弃的div不再可拖动了。奇怪的行为是有几个这样的可丢弃的div。第一个仍然是可拖动的，其他的则不是。什么可能导致接受选项打破可拖动的行为。

Answer 1

发现问题。应该将所有选项放在一个可放置的方法中。以下作品。

    $('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",
     });

Jquery droppable选项会破坏该元素的可拖动行为

1 个答案: