Как использовать jQuery для перетаскивания <div>в определенную позицию?

Question

Я не могу перетащить <DIV> в определенную позицию.

<DIV> прямо сейчас добавляются к нижней части предыдущего <DIV>, даже если я переместил первый <DIV> от начальной позиции.

Например:

Скажем, каждый <DIV> height = 50, width = 100;

Когда я бросаю первый <DIV>, он падает в позиции, скажем, (10,10)

Следующий <DIV> сбрасывается в (10,10 + 50). Следующий на (10,10 + 50 + 50).

Я хочу, чтобы все <DIV> упали на (10,60).

Моя функция сброса:

drop: function(ev, ui) {
    if($(ui.draggable).is("img")){
        //$(this).css("position", "absolute");
        $(this).position().left = 85;
        $(this).position().top = 338;
        //$(this).css("position", "relative");
    }

});

Если я установлю абсолютное положение. Он сбрасывает его в указанной позиции, но дальнейшего перетаскивания не происходит.

Можете ли вы, ребята, предложить некоторую помощь. Заранее спасибо.

Обновление: Это мой HTML-код с тремя элементами div и стилем для div и right. Никакой особый стиль не указан для основного div, кроме высоты.

<div id="maindiv" style="height:500px">
  <div id="left">
     <img id="1" src="/1.png"/>
     </div> <!-- Left Div End -->
 <div id="content">

 </div> <!-- Content End -->
 </div> <!-- main div End-->

Стиль контента:

content {
    border:2px solid #DFA214;
    float:right;
    height:400px;
    margin:1px;
    overflow:auto;
    position:relative;
    width:74%;
}

Если я изменю положение на абсолютное, то перетаскивание больше не будет работать:

left {
    border:2px solid #DFA214;
    float:left;
    height:400px;
    margin:1px;
    position:relative;
    width:24%;
}

Answer 1

Когда вы двигаетесь относительно, вы по-прежнему занимает исходное пространство (даже если оно кажется пустым). Вместо этого вам нужно изменить логическую позицию элементов в DOM.

На самом деле, перечитывая свой вопрос, вы двигаетесь относительно, поэтому вам нужно учитывать ОРИГИНАЛЬНУЮ позицию при установке целевой позиции.

$(this).position().left = 85 - $(this).position().left;

Или что-то в этом роде.

Answer 2

Попробуйте поместить все элементы div, которые вы хотите переместить, в контейнер div. Каждый из дочерних элементов должен иметь относительное позиционирование. Затем измените размер родителя.

Answer 3

Свойства top, bottom, left и right работают только тогда, когда положение установлено на фиксированное, абсолютное и относительное. Чтобы установить элемент в фиксированную позицию, единственный способ - использовать абсолют. Возможно, перетаскивание должно быть изменено.