如何设置 jQuery 可拖动克隆的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6489794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I style jQuery draggable clone?
提问by newbie
How can I style jQuery draggable clone with CSS?
如何使用 CSS 设置 jQuery 可拖动克隆的样式？
回答by Jayantha Lal Sirisena
Refer to second answer by tohster - this is outdated.
请参阅 tohster 的第二个答案 - 这已经过时了。
=======
========
http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.htmlthis might be a help
http://webdevel.blogspot.com/2008/09/jquery-ui-draggables-helper-css-class.html这可能有帮助
Quoting from the above site:
引自上述网站：
While working with jQuery UIdraggables, I have noticed that there does not seem to be a class associated with the draggable helper, and so it is styled in the same way as the draggable you selected. As a result you have to resort to the start function option to add the class dynamically:
在使用jQuery UI可拖动对象时，我注意到似乎没有与可拖动助手相关联的类，因此它的样式与您选择的可拖动对象相同。因此，您必须求助于 start 函数选项来动态添加类：
$(".dragme").draggable({helper: "clone",
start: function(e, ui)
{
$(ui.helper).addClass("ui-draggable-helper");
}
});
As a result you have to resort to the start function option to add the class dynamically:
因此，您必须求助于 start 函数选项来动态添加类：
.ui-draggable-helper {
border: 1px dotted #000;
padding: 6px;
background: #fff;
font-size: 1.2em;
}
回答by tohster
There's a better way
有更好的方法
jQuery UI has evolved since the answer was posted in 2011.
自 2011 年发布答案以来，jQuery UI 已经发展。
With current versions of jQuery, the .ui-draggable-draggingclass is added to the clone being dragged.
对于当前版本的 jQuery，.ui-draggable-dragging该类被添加到被拖动的克隆中。
So for example, if you have the following draggable element:
例如，如果您有以下可拖动元素：
<div class="myDraggable">
</div>
<script>
$('.myDraggable').draggable({opacity: 0.7, helper: "clone"});
</script>
<style>
.myDraggable.ui-draggable-dragging { background: red; }
</style>
..then the myDraggable element clone will have a red background when it is picked up and dragged.
..然后 myDraggable 元素克隆在被拾取和拖动时将具有红色背景。
The helper class is present in jQuery UI 1.7.1 onwards, and it may also be present in some earlier versions but I haven't tracked that down.
helper 类出现在 jQuery UI 1.7.1 以后，它也可能出现在一些早期版本中，但我没有追踪到。
回答by Palpatine1991
The cleaner approach is to use helper function:
更简洁的方法是使用辅助函数：
function getHelper(event, ui) {
var?helper?=?$(ui).clone();
helper.addClass("ui-draggable-helper");
return?helper;
}
$('.myDraggable').draggable({
helper: getHelper
});
