jQuery: остановить абсолютное позиционирование перетаскиваемых элементов?

Question

Я - полный нуб JQuery и Javascript, пытающийся заставить работать очень простую демоверсию перетаскивания.Я приближаюсь, но мои перетаскиваемые элементы имеют абсолютное позиционирование, поэтому они не сочетаются друг с другом.

Разметка очень проста:

<section class="favrecentboxessection" id="favorites"> 

    little divs with the style set to draggable 

</section> 

<section class="favrecentboxessection" id="recents"> 

    where they are dragged to

</section> 

И мойгрустный маленький jQuery:

        $( init );

    var $favorites = $( "#favorites" ),
        $recent = $( "#recent" );


    function init() {
        $('.favrecentbox').draggable( {
            cursor: 'move',
            containment: '#mainsection',
            stack: '.favrecentbox',
            revert: 'invalid',
            revertDuration: 200,
        } );

            $('.favrecentboxessection').droppable( {
            accept: ".favrecentbox",
            activeClass: 'ui-state-highlight',
                drop: function (event, ui) {
                handleDropEvent (ui.draggable);
                }
        } );

        function handleDropEvent( $item ) {

        var temp;
        temp = $item.detach();
        temp.appendTo( $('#favorites'));

У меня работает перетаскивание, но при отбрасывании они переносят абсолютное позиционирование (установлены левый, верхний и т. д.).Как мне это отключить?

Answer 1

Нет необходимости делать это сложнее, чем сейчас. Удаление CSS кажется плохой идеей.

См .: http://jsfiddle.net/MPy9n/6/

draggableOptions = { appendTo: "body", zIndex: 99};

$( ".favrecentbox" ).draggable(draggableOptions);

$( ".favrecentboxessection" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: ":not(.ui-sortable-helper)",
    drop: function( event, ui ) {
        console.log(ui);
        $( ui.draggable ).remove();
        $( '<div class="favrecentbox"></div>' ).html( ui.draggable.html() ).draggable(draggableOptions).appendTo( this );
    }});

Answer 2

Вы можете попробовать использовать $ (x) .css () для манипулирования CSS после удаления .....

Answer 3

вы можете добавить его в качестве дочернего элемента в контейнер для сбрасывания при падении.

$('.favrecentboxessection').droppable( {
        accept: ".favrecentbox",
        drop: function(ev, ui) {
            $(this).append($(ui.draggable));
            $(ui.draggable).css({position:'relative'});
        },
        activeClass: 'ui-state-highlight',
            drop: function (event, ui) {
            handleDropEvent (ui.draggable);
            }
    } );