拖动时保持元素的css样式答案

【问题标题】：maintain css styling for element when dragging拖动时保持元素的css样式
【发布时间】：2015-02-03 21:45:14
【问题描述】：

您好，我正在使用拖放操作，我想知道如何在被拖动的元素上保持我的 css 样式。当元素没有被拖动时，它具有一定的宽度，该宽度与元素内的文本长度相匹配，但是当我开始拖动元素时，文本会在光标周围的元素上环绕，并移动到新行。

<li value="this is a big tag for me" class="tag ui-draggable ui-draggable-handle">this is a big tag for me</li>
<li value="tag5" class="tag ui-draggable ui-draggable-handle">tag5</li>
<li value="tag 6" class="tag ui-draggable ui-draggable-handle">tag 6</li>
<li value="tag 2" class="tag ui-draggable ui-draggable-handle">tag 2</li>
<li value="tag1" class="tag ui-draggable ui-draggable-handle">tag1</li>
<li value="tag 3" class="tag ui-draggable ui-draggable-handle">tag 3</li>
<li value="tag 4" class="tag ui-draggable ui-draggable-handle">tag 4</li>

这是我设置拖动的方式

$('.tag').draggable({
        revert: 'invalid',
        helper: "clone",
        start: function(ev, ui){
            $(this).css('color', '#000');
        },
        stop: function(){
            $(this).draggable('option', 'revert','invalid');
            $(this).css('color', '#fff');
        },
        cursor: "move"
    });

我希望元素在被拖动时保持其宽度。我怎样才能做到这一点？

谢谢

【问题讨论】：

标签： jquery html css drag-and-drop draggable

【解决方案1】：

怎么样

.tag{min-width:100%;min-height:100%;}

$('.tag').draggable({
        revert: 'invalid',
        helper: "clone",
        start: function(ev, ui){
            $(this).css('color', '#000');
        },
        stop: function(){
            $(this).draggable('option', 'revert','invalid');
            $(this).css('color', '#f00');
        },
        cursor: "move"
    });

.tag{min-height:100%;min-width:100%;}

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<li value="this is a big tag for me" class="tag ui-draggable ui-draggable-handle">this is a big tag for me</li>
<li value="tag5" class="tag ui-draggable ui-draggable-handle">tag5</li>
<li value="tag 6" class="tag ui-draggable ui-draggable-handle">tag 6</li>
<li value="tag 2" class="tag ui-draggable ui-draggable-handle">tag 2</li>
<li value="tag1" class="tag ui-draggable ui-draggable-handle">tag1</li>
<li value="tag 3" class="tag ui-draggable ui-draggable-handle">tag 3</li>
<li value="tag 4" class="tag ui-draggable ui-draggable-handle">tag 4</li>

【讨论】：