как убрать стиль css из jquery-ui, который автоматически добавляется, когда кто-то использует ".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));
    }
});

• изменить - Мы углубились в это немного глубже, и причина, по которой мой опубликованный код работает, а не вопрос, заключается в том, что в «перетаскиваемом» параметре «helper: clone». Когда используется помощник, он применяет левый / верхний CSS к помощнику, а не к фактическому элементу, который мы перетаскиваем.

Переключатели start / stop в перетаскиваемом элементе делают исходный элемент исчезающим, но включают его снова, когда его удаляют - для имитации визуального отображения по умолчанию $ (). Draggable ().

Кроме того, я был бы осторожен с числами, которые у вас есть в вашем CSS - это также может дать странные результаты.