如何为jQuery可拖动的克隆元素添加样式？

Question

我该如何用CSS样式化jQuery可拖动克隆元素？

- newbie

Answer 1

参考 tohster 的第二个答案-已过时。

=======

这里 可以提供帮助

引用上述网站的内容:

在使用jQuery UI draggables时，我发现似乎没有与可拖动助手相关联的类，因此它的样式与您选择的可拖动对象相同。因此，您必须使用 start 函数选项动态添加类：

$(".dragme").draggable({helper: "clone",
 start: function(e, ui)
 {
  $(ui.helper).addClass("ui-draggable-helper");
 }
});

因此，您必须使用start函数选项来动态添加类：

.ui-draggable-helper {
 border: 1px dotted #000;
 padding: 6px;
 background: #fff;
 font-size: 1.2em;
}

- Jayantha Lal Sirisena

---

注意 - 如果您使用CSS调整克隆项的大小，它似乎会破坏拖动时助手的定位。 - JoshL

我的元素很大，这个解决方案帮助我降低不透明度，这样我就可以看到下面的东西。谢谢。 - Dee

Answer 2

有更好的方法

自2011年发布答案以来，jQuery UI 已经发生了变化。

在当前版本的 jQuery 中，.ui-draggable-dragging 类会被添加到正在拖动的克隆元素中。

例如，如果您有以下可拖动元素：

<div class="myDraggable">
</div>

<script>
   $('.myDraggable').draggable({opacity: 0.7, helper: "clone"});
</script>

<style>
   .myDraggable.ui-draggable-dragging { background: red; }
</style>

如果选择并拖动myDraggable元素，则其克隆将具有红色背景。

helper类在jQuery UI 1.7.1及更高版本中存在，但在早期版本中也可能存在，但我没有跟踪到。

- tohster

Answer 3

更加清晰的方法是使用辅助函数：

function getHelper(event, ui) {
    var helper = $(ui).clone();
    helper.addClass("ui-draggable-helper");
    return helper;
}

$('.myDraggable').draggable({
    helper: getHelper
});

- Palpatine1991

---

方法 getHelper 怎么调用？我用这段代码出现了错误。 - FrenkyB