Question

如何使用CSS设置jQuery draggable clone的样式？

Answer 1

请参阅tohster的第二个答案 - 这已经过时了。

=======

http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.html这可能是一个帮助

从上述网站引用：

在使用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;
}

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元素克隆在拾取和拖动时将具有红色背景。

辅助类在jQuery UI 1.7.1之后出现，它也可能出现在某些早期版本中，但我还没有跟踪它。

Answer 3

更干净的方法是使用辅助函数：

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

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

我如何设置jQuery可拖动克隆的样式？

3 个答案:

有更好的方式