如何清潔jQuery的UI的CSS樣式自動添加，當有人用「.draggable（）」

Question

這是我的代碼：

<style type="text/css"> 
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; 
    border:1px solid #DDDDDD; 
    color:#333333; 
    background:#F2F2F2; 
    } 
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; 
    border:1px solid #E78F08; 
    color:#FFFFFF; 
    font-weight:bold; 
    background:#F6A828; 
    } 
#droppable.highlight{ 
    background:#FFE45C; 
    } 
</style> 



<div class="demo" style="margin-left:35%;margin-top:10%;cursor:pointer;"> 
    <div id="draggable"> 
     <p>Drag me to my target</p> 
    </div> 
    <div id="droppable" > 
     <p>Drop here</p> 
    </div> 
</div><!-- End demo --> 

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="jquery-ui-1.8rc3.custom.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $("#draggable").draggable(); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
      $(this).addClass('highlight').find('p').html('Dropped!'); 
      $(this).append(ui.draggable.draggable("destroy")) 
     } 
    }); 

}); 

我想拖一個div到另一個

當我拖累了採空，這表明：

這似乎並不爲 「進」 可放開DIV，

因爲可拖動的div被自動添加一些CSS樣式時，使用「.draggable（）」

element.style { 
left:133px; 
position:relative; 
top:38px; 
} 

我可以清理的CSS，但確實jQuery的UI具有做到這一點的方法？

Answer 1

不太清楚你想要完成的任務 - 多一點細節將幫助，但這裏是一個鏡頭...

所以這裏有一個例子是「刀片」拖動到下降 - 應用CSS幫助者而不是元素。

$("#draggable").draggable({ 
    revert: 'invalid', 
    helper: 'clone', 
    zIndex: 350, 
    start: function() { $(this).toggle(); }, 
    stop: function() { $(this).toggle(); } 
}); 
$("#droppable").droppable({ 
    accept: '#draggable', 
    drop: function(event, ui) { 
       $(this).addClass('highlight').find('p').html('Dropped!'); 
       $(ui.draggable).draggable("destroy").appendTo($(this)); 
    } 
}); 

• 編輯 - 跳進這個深一點，和我貼的代碼工作，而不是問題的原因是因爲「幫手：克隆」的可拖動選項。當使用助手時，它將左/頂部CSS應用於助手，而不是我們正在拖動的實際元素。

可拖動中的開始/停止切換使原始元素消失，但在其下降時將其重新打開 - 以模擬$（）。draggable（）的默認視覺效果。

另外，我會小心你的CSS中的浮點數 - 這也可能會導致奇怪的結果。