Question

您好我正在使用拖放操作，我想知道如何在被拖动的元素上维护我的CSS样式。当元素没有被拖动时，它具有一定的宽度，该宽度与元素中的文本长度相匹配，但是当我开始拖动元素时，文本在光标周围的元素上被包裹，并移动到新的行。 / p>

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

拖动时保持元素的css样式

1 个答案: