jQuery draggable，在拖动开始时制作褪色副本

Question

我正在构建一个带有jQuery UI的应用程序及其可拖动和可放置的插件。我的目标是实现以下目标：

基本上，我希望当拖动开始在拖动的项目后面留下褪色的副本。请注意，拖动的项目是图像，每次都不同。 我的代码接近jQuery文档中的默认draggable / droppable示例。

_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在拖动时会创建自己的占位符，而我无法弄清楚如何禁用它。

非常感谢任何有关正确解决方案的建议。 感谢。

Answer 1

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

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

Answer 2

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