使用 jquery 可拖放/可拖放设置放置变量答案

【问题标题】：Set variable on drop using jquery draggable/droppable使用 jquery 可拖放/可拖放设置放置变量
【发布时间】：2009-02-05 18:12:47
【问题描述】：

我正在做一个使用 jquery ui 可拖放/可拖放的概念证明。

我正在寻找一种方法来设置一个变量，该变量等于放入可放置区域的 div 的索引。（假设我有名为“div0”、“div1”、“div2”等的 div……）

所以想象一下代码看起来像这样：

<div id="div0" class="draggableDiv">some cotent</div>
<div id="div1" class="draggableDiv">more content</div>
<div id="div2" class="draggableDiv">yet more content</div>

<div class="droppableDiv">drop it here</div>

$(document).ready(function() {
    $('.draggableDiv').draggable({helper: 'clone'});
    $('.droppableDiv').droppable({
        accept: '.draggableRecipe',
        drop: function(ev, ui) { 
            ui.draggable.clone().fadeOut("fast", 
            function() { 
                $(this).fadeIn("fast") 
            }).appendTo($(this).empty());
                        // function to set someVar = div[index];
        }
    });
});

我不确定如何最好地做到这一点，所以如果有人有任何建议，我将不胜感激。

谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

<div id="div0" class="draggableDiv">some cotent</div>
<div id="div1" class="draggableDiv">more content</div>
<div id="div2" class="draggableDiv">yet more content</div>

<div id='dropplace' class="droppableDiv">drop it here</div>

<script language='javascript'>

$(document).ready(function() {
    $('.draggableDiv').draggable({helper: 'clone'});
    $('.droppableDiv').droppable({
        accept: '.draggableDiv', //changed this, it was originally 'draggableRecipe'
        drop: function(ev, ui) { 

                //get the index of dropped draggable div
                var divIndex = $('div').index(ui.draggable)
                alert(divIndex) //alert the divIndex to see the result

                ui.draggable.clone().fadeOut("fast", 
                function() { 
                        $(this).fadeIn("fast") 
                }).appendTo($(this).empty());
        }
    });
});
</script>

测试了这个，它对我有用，希望对你也有用。祝你好运

【讨论】：

【解决方案2】：

您应该能够使用

解析 div 的 id

$.droppedItems = {};

var droppedId = $(this).attr('id').replace('droppable', '');
$.droppedItems[droppedId] = ui.draggable.attr('id').replace('div', '');

【讨论】：

啊，谢谢。所以现在想象一下，我有多个 class="droppableDiv" 的 div，所以说 id="drop0", id="drop1", id="drop2"。如何将可拖动 div 的 currentIndex 与可放置 div 的索引相关联？如果 $(this) 指的是可拖动的，我如何引用 droppable？
更新了帖子。我可能在 droppable 上使用 this 时弄错了。

【解决方案3】：

在drop: function(ev, ui) {这一行之后添加：

var droppedId = ui.draggable.attr("id");

之后，droppedId 将成为您的 div0、div1 或 div2 之一 - 取决于哪个被丢弃。

【讨论】：