Javascript 如何接受上一个拖动并还原上一个拖动

我有一个练习，我必须把单词拖到空白处

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 UI与jQuery一起附加到DOM，这是脚本

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

HTML

---

这就是原因。

我无意冒犯，但是，使用jQuery确实需要一点时间——但是，它做得很好，它有许多包装好的全局函数，您可以编写更少的函数，但需要更多的函数动画等等。如果我是您，我会继续尝试。谢谢。很抱歉回答晚了，但莫菲斯把我搂在怀里了。我想继续我的方法，因为这只是一个大项目的一部分，我不想重写它。我找到了雷蒙德·麦卡莱的剧本，这对我很有帮助。我在那个基地工作，完全明白。将此视为未来发展的后脑勺参考资料；

$(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 };
        },
    };
})();

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

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

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

 #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; }