Как принять последний перетаскиваемый и вернуть предыдущий

Question

У меня есть упражнение, где мне нужно перетаскивать слова в пробелы.

HTML:

<div> 
<ul class="boxy"> 
    <li id="box0" class="dragli">box0</li> 
    <li id="box1" class="dragli">box1</li> 
    <li id="box2" class="dragli">box2</li> 
</ul> 
<br /><br /> 
</div> 

<div> 
<br /> 
    gap0 : 
    <span class="GapSpan" id="GapSpan0"> 
    <input type="text" id="Gap0" class="GapBox" size="7"></input> 
    </span> 
    gap1 : 
    <span class="GapSpan" id="GapSpan1"> 
    <input type="text" id="Gap1" class="GapBox" size="7"></input> 
    </span> 
    gap2 : 
    <span class="GapSpan" id="GapSpan2"> 
    <input type="text" id="Gap2" class="GapBox" size="7"></input> 
    </span> 
</div> 

Если я бросаю слово в промежутке, где слово было ранее упал, я хотел бы видеть это предыдущее слово возвращается на прежнее место и заменяется новым один.

Я совсем не могу с jquery и безуспешно пытаюсь использовать различные решения. Вот где я:

GAPS =new Array(); 
for (var g=0; g<3; g++)// gapnum 
{ 
    GAPS[g] = new Array(); 
    GAPS[g][0] = -1;//boxnum or -1 
} 

$(init); 
function init() { 

$(".dragli").draggable({ 
    cursor: 'move', 
    scroll: true,  
    revert: false, 
    helper : 'clone', 
    start: function (event, ui) { 
      ui.helper.data('previous-position', ui.helper.offset()); 
     }, 

}); 

$(".GapBox").droppable({ 

    drop: function (event, ui) { 
     var gapnum = $(this).attr('id').substring(3); 
     var boxnum = ui.draggable.attr('id').substring(3); 
     //If there is a word prior to the current one on this gap 
     if (GAPS[parseInt(gapnum)][0] != -1) //yes 
     { 
      var previous_idbox= 'box'+GAPS[parseInt(gapnum)][0];// previous word 
      //go home ! 
      // next line is not working 
      //$("#" + previous_idbox).animate($("#" + previous_idbox).data().originalLocation, "slow"); 
     } 
     else { 
      GAPS[parseInt(gapnum)][0] =boxnum; // storage 
     } 
     ui.draggable.position({ of: $(this), my: 'center', at: 'center' }); 
    }, 

}); 

}

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

И я не знаю, как вернуть предыдущее слово домой.

Не могли бы вы мне помочь?

Вы можете увидеть файл here

---

мне удалось сделать то, что я хотел очень вдохновлен сценария Раймонда Macaalay (см ссылку на мой комментарий к ответу Faron в). Вот сценарий:

$(function() { 
var previous_boxId = ""; 

$(".dragli").draggable({ 
    cursor: 'move', 
    scroll: true,  
    revert: false, 
    helper : 'clone', 
    start: function (event, ui) { 
      Positioning.initialize($(this)); 
     }, 

}); 

$(".GapBox").droppable({ 

    drop: function (event, ui) { 
     var gapId = $(this).attr('id'); 
     var boxId = $(ui.draggable).attr('id'); 
     // drop the current draggable 
     ui.draggable.position({ of: $(this), my: 'center', at: 'center' }); 
     //If there is a word prior to the current one on this gap 
     if ((previous_boxId != "") && ($("#" + previous_boxId).data("gap_id") == gapId)) 
     { 
      //go home ! 
      $("#" + previous_boxId).animate($("#" + previous_boxId).data().originalLocation, "slow"); 

     } 

      previous_boxId = boxId; 
       $("#" + previous_boxId).data("gap_id", gapId); 

    }, 

    out: function (event, ui) { 
      var boxId = $(ui.draggable).attr('id'); 
      $(ui.draggable).animate($(ui.draggable).data().previous-position, "slow"); 
     }, 

}); 

}); 

var Positioning = (function() { 
    return { 
     //Initializes the starting coordinates of the object 
     initialize: function (object) { 
      object.data("originalLocation", $(this).originalPosition = { top: 0, left: 0 }); 
      object.data("previous-position", $(this).offset()); 
     }, 
     //Resets the object to its starting coordinates 
     reset: function (object) { 
      object.data("originalLocation").originalPosition = { top: 0, left: 0 }; 
     }, 
    }; 
})(); 

Результат можно увидеть here.

Answer 1

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

Это совершенно другой подход к написанию сценария, но он дает результат как то, что вы ищете, если я правильно понимаю вашу концепцию. То, что я сделал, - это добавить jQuery UI в DOM вместе с jQuery, и это сценарий.

$(function() { 
$("#context").draggable(); 
var getcontent = $('#text').text(); 
$("#transfer").droppable({ 
    drop: function(event, ui) { 
    $(this) 
     .find("p") 
     .html(getcontent); 
     $('#text').empty(); 
    } 
}); 
}); 

HTML

<div id="context" > 
<p id="text">my variable string</p> 
</div> 

<div id="transfer"> 
<p>Drop here</p> 
</div> 

CSS

#context{ width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
#transfer{ width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 

Вот JSFIDDLE для этого.