jQuery拖動，使拖放開始褪色副本

我正在構建與jQuery UI的應用程序，它是可拖動和可插入的插件。我的目標是archieve如下：jQuery拖動，使拖放開始褪色副本

enter image description here

基本上，我希望在拖拽開始離開其拖動到項目背後褪色的副本。請注意，拖動的項目是圖像，每次都會有所不同。我的代碼接近jQuery文檔中默認的可拖放/放置示例。

_this.draggable({ 
    revert: "invalid", 
    start: function(event, ui) { 
     _this.addClass("closest"); 
     .....morecode.... 
    }, 
    stop: function(event, ui) { 
     _this.removeClass("closest"); 
     ...code..    
    } 
});

我的第一個想法是clone()上拖曳開始的項目，並把它放在拖動項目的默認位置較低z-index和位置絕對的，但因爲我的頁面響應，將打破整個UI。放置克隆的項目after()原來的不是一個解決方案，因爲jQuery UI在拖動時創建了自己的佔位符，我無法弄清楚如何禁用。

任何有關正確解決方案的建議將不勝感激。謝謝。

來源

2014-03-25 Deepsy

」jQuery UI使他自己pl aceholder拖動時，我無法弄清楚如何禁用「http://api.jqueryui.com/draggable/#option-helper –

內置'draggable（{opacity：0.7，helper：」clone「 }）;'不工作？這就是你正在描述的內容，但在相反的情況下，被拖動的項目被淡化，但原始（開始版本）保持正常。 – Anthony

您可以使用helper和stop方法/屬性與toggleclass返回克隆和原設定爲自定義褪色類，如：

$("#draggable").draggable({ 
     helper: function (event) { 
      var ret = $(this).clone(); 
      $(this).toggleClass("ghost"); 
      return ret; 
     }, 
     stop: function (event, ui) { 
      $(this).toggleClass("ghost"); 
     } 
    });

CSS

.ghost { 
    opacity: .5; 
}

「http://jsfiddle.net/Xms8W/2/

來源

2014-03-25 19:04:39 Anthony

我要把這個標記爲答案，因爲我實際上需要對助手做一些更改，所以我需要使用助手函數。謝謝。 – Deepsy

您也可以使用內置的透明度選項，但希望這是在起始位置的項目是不透明的，而不是

<div class="selector">ABCDEFGHIJKLMNOPQRSTUVWXYZ</div>

$(".selector").draggable({ 
    helper: "clone", 
    start: function(e){ 
     $(e.target).css({opacity: 0.5}); 
    }, 
    stop: function(e){ // need to put it back on stop 
     $(e.target).css({opacity: 1}); 
    }, 
});

演示http://jsfiddle.net/EQpwb/2/

雖然，操作系統的工作方式與jqueryui相同，拖動的項目是不透明的。我個人會堅持這一點。

$(".selector").draggable({ 
    helper: "clone", 
    opacity: 0.5, 
});

來源

2014-03-25 18:35:33

jQuery拖動，使拖放開始褪色副本

回答

相關問題