拖动时保持元素的CSS样式

Question

嗨，我正在拖放，我想知道如何在要拖动的元素上保持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"
    });

我希望元素在被拖动时保持其宽度。 我该如何实现？

谢谢

Answer 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>