jQuery可拖动，在拖动开始时制作褪色副本答案

【问题标题】：jQuery draggable, make faded copy on drag startjQuery可拖动，在拖动开始时制作褪色副本
【发布时间】：2014-03-25 18:24:22
【问题描述】：

我正在使用 jQuery UI 构建一个应用程序，它是可拖放的插件。我的目标是归档以下内容：

基本上，我希望在拖动开始时在被拖动的项目后面留下一个褪色的副本。请注意，拖动的项目是图像，并且每次都不同。我的代码接近 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 在拖动时会创建自己的占位符，我无法弄清楚如何禁用。

我们将不胜感激任何有关适当解决方案的建议。谢谢。

【问题讨论】：

"jQuery UI 在拖动时会自己制作占位符，我不知道如何禁用"api.jqueryui.com/draggable/#option-helper
内置的draggable({ opacity: 0.7, helper: "clone" }); 不工作吗？这就是您所描述的，但相反，拖动的项目褪色但原始（起始版本）保持正常。

标签： jquery jquery-ui

【解决方案1】：

您可以将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/

【讨论】：

我要把这个标记为答案，因为我实际上需要对助手做一些更改，所以我需要使用助手函数。谢谢。

【解决方案2】：

您可以使用内置的不透明度选项，但您希望位于起始位置的项目改为不透明

<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,
});

【讨论】：