在拖放位置丟棄可拖放的內容

我一直在嘗試克隆和拖放可拖動內容的位置處的拖動器，該位置發生拖動的座標爲。我在網上找到了一些例子來處理將可拖動對象添加到可拖放對象的問題，但它們似乎都將可拖動對象移動到初始拖放對象的特定部分。在拖放位置丟棄可拖放的內容

這裏，不只是一個例子： - http://jsfiddle.net/scaillerie/njYqA/

//JavaScript from the jsfiddle 
jQuery(function() { 
jQuery(".component").draggable({ 
    // use a helper-clone that is append to 'body' so is not 'contained' by a pane 
    helper: function() { 
     return jQuery(this).clone().appendTo('body').css({ 
      'zIndex': 5 
     }); 
    }, 
    cursor: 'move', 
    containment: "document" 
}); 

jQuery('.ui-layout-center').droppable({ 
    activeClass: 'ui-state-hover', 
    accept: '.component', 
    drop: function(event, ui) { 
     if (!ui.draggable.hasClass("dropped")) 
      jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable()); 
     } 
    }); 
});

反正我可以在其中下垂髮生的座標可拖動留？

來源

2014-10-11 Sean Law

必須定義在下降克隆元素的座標：

下降：函數（事件，UI）{ 如果（ui.draggable.hasClass（「下降「））

 var clone=jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
     clone.css('left',ui.position.left);  
     clone.css('top',ui.position.top); 

     jQuery(this).append(clone); 
    } 
});

，還可以設置絕對位置由CSS上的已克隆部件

.ui-layout-center .component { 
    position:absolute !important; 
}

這裏工作：http://jsfiddle.net/o2epq7p2/

來源

2014-10-11 08:19:55 Balder

實現了這一點，它完美的工作！ – 2014-10-12 12:08:54

很高興幫助:) – Balder 2014-10-12 17:03:40

uidrop處理程序包含拖動元素的絕對位置到頁面。您需要將這些值轉換爲相對於放置目標的位置，並使用這些值將放置目標中的克隆元素絕對定位。

drop: function(e, ui) { 
     if (!ui.draggable.hasClass("dropped")) { 
      var parentOffset = jQuery('.ui-layout-center').offset(); 
      var dropped = jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
      dropped.css('left', (ui.position.left - parentOffset.left) +'px'); 
      dropped.css('top', (ui.position.top - parentOffset.top) +'px'); 

      jQuery(this).append(dropped); 
     } 
    }

http://jsfiddle.net/3Lnqocf3/

來源

2014-10-11 08:19:30

這完全得工作！感謝您的答覆！ – 2014-10-12 12:09:28

編輯你的代碼，並使用appendTo（），並設置偏移

jQuery(function() { 
    jQuery(".component").draggable({ 
     // use a helper-clone that is append to 'body' so is not 'contained' by a pane 
     helper: function() { 
      return jQuery(this).clone().appendTo('body').css({ 
       'zIndex': 5 
      }); 
     }, 
     cursor: 'move', 
     containment: "document" 
    }); 

    jQuery('.ui-layout-center').droppable({ 
     activeClass: 'ui-state-hover', 
     accept: '.component', 
     drop: function(event, ui) { 
      var _this = jQuery(this); 
      if (!ui.draggable.hasClass("dropped")) { 
       var cloned = jQuery(ui.draggable).clone().addClass("dropped").draggable(); 
       jQuery(cloned).appendTo(this).offset({ 
        top : ui.offset.top, 
        left: ui.offset.left 
       }); 
      } 
     } 
    }); 
});

來源

2014-10-11 08:31:33

在拖放位置丟棄可拖放的內容

回答

相關問題