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

});

}

我确信有一个比使用数组存储更好的方法，知道哪个draggable在droppable中，但我不知道该怎么做。

而且我不知道如何将之前的话还原回家。

你能帮帮我吗？

您可以看到文件here

我成功地做了我想要的雷蒙德·马卡莱（Raymond Macaalay）剧本的灵感（请参阅我对法隆答案的评论中的链接）。这是脚本：

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

$(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。

如何接受最后一次拖动并恢复前一次拖动

1 个答案: