拖动时保持元素的CSS样式

Question

Hi I am working with drag and drop, and I want to know how I can maintain my css style on the element which is being dragged. When the element is not being dragged it has a certain width which matches the length of text within the element but when I start dragging the element the text gets wrapped around on the element which follows the cursor around, and moves to a new line.

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

Here is how I'm setting up the dragging

$('.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"
    });

I want the element to maintain its width when being dragged. How can I achieve this?

Thanks

Answer 1

what about

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