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

new*_*bie 31 jquery jquery-ui

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

Jay*_*ena 53

请参阅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");
 }
});
Run Code Online (Sandbox Code Playgroud)

因此,您必须使用start函数选项动态添加类:

.ui-draggable-helper {
 border: 1px dotted #000;
 padding: 6px;
 background: #fff;
 font-size: 1.2em;
}
Run Code Online (Sandbox Code Playgroud)


toh*_*ter 24

还有更好的方法

自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>
Run Code Online (Sandbox Code Playgroud)

然后,myDraggable元素克隆在拾取和拖动时将具有红色背景.

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