перетаскивание содержимого в разные элементы div без перемещения самого div

Question

Я пытаюсь сделать что-то трудное. Я работаю над новой идеей, что я не знаю, как лучше всего поступить.

У меня есть 3 горизонтальных divs внутри контейнера div. Первый DIV имеет ширину 250, то второй имеет ширину 400, а третий имеет ширину 240.

<div id="container"> 
<div id="div1">This is div 1. It comes first.</div> 
<div id="div2">This is div 2.</div> 
<div id="div3">This is the last div</div> 
</div> <!-- ends container --> 

Теперь, что я пытаюсь сделать. Я хочу, чтобы иметь возможность щелкнуть текст внутри div и перетащить его в другой div, который будет сортировать текст с помощью ajax. Я могу кодировать код сортировки jquery для этого (если у кого-то это не было или он хочет его написать). Мне просто нужно знать, какой метод использовать для этого, поскольку контейнеры имеют разную ширину, и мне нужно только перетащить текст, а не полный контейнер, и я не хочу перемещать фактические divs. У меня возникла идея как-то кодировать внутренние divs, содержащие только текст, но не уверен, что это сработает или нет. Текст ТОЛЬКО может быть перемещен внутри контейнера.

Любые идеи?

Answer 1

Вы можете поместить текст внутри тегов <p>, а затем добавить .mousedown() к каждому тегу <p>. Когда событие запускается, переместите <p> после мыши (вы можете изменить положение на абсолютное, и есть примеры отслеживания мыши на главной странице jquery), при перемещении <p> вы можете ограничить значения, чтобы они не выходили из вашего контейнера , Наконец, с событием .mouseup() вы можете проверить конечную позицию, узнать, в каком div она была сброшена и обрабатывать это.

Answer 2

Используйте wrap или wrapInner, чтобы обернуть содержимое элементом и установить сортировку по этому элементу с помощью опции «connectWith», чтобы связать ее с другими div.

$(function() { 
    $('#container div').each(function() { 
     $(this).wrapInner('<div/>').sortable({ 
      connectWith: '#container div' 
     });; 
    }); 
}); 

WrapInner Doc: http://api.jquery.com/wrapInner/

Сортируемый с ConnectWith: http://jqueryui.com/sortable/#connect-lists

Fiddle: http://jsfiddle.net/4SS5N/