Javascript 现场可拖动分区-位置，排序奇怪的行为

我用按钮将元素添加到绿色div中，然后我想将它们拖动到红色div中。拖动（只是移动到红色元素）时，它会移动（或小跳跃）。看看我的小提琴，试试看

   jQuery(document).ready(function() {

        $('#pridaj').click(function(){
             $("<div style='border:1px solid black; position: relative;padding:3px;margin:2px;width:190px;float:left;' class='keyword'>"+$('#newArea').val()+"</div>").appendTo('#green');
            $('#newArea').val('');

        });
         $('.keyword').live('mouseover',function(){
            $('.keyword').draggable({connectToSortable:'#red'});
         });
    });

     $(function() {
         $( "#red" ).sortable();
         $( "#red" ).disableSelection();
    });

jQuery（文档）.ready（函数（）{
$（'#pridaj'）。单击（函数（）{
$（“+$”（“#newArea”）.val（）+”）.appendTo（“#green”）；
$（'#newArea'）.val（''）；
});
$（'.keyword'）.live（'mouseover'，function（）{
$（'.keyword'）.draggable（{connectToSortable:'#red'}）；
});
});
$（函数（）{
$（“#红色”）.sortable（）；
$（“#红色”）.disableSelection（）；
});

和。。如果我想把它们拖回去，它也会做这些事情

---

定位（绝对/相对）可能有问题，但我还没有发现。

您不需要继续添加.draggable，只需将绿色和红色作为可排序列并链接它们即可

我试着把它浓缩下来，用一种稍微不同的方式来做

顺便说一句，它有助于保持你的CSS分开，而不是内联。这将有助于使事物更易于阅读、维护和更改

<style type="text/css">  
    #pridaj {
        border:1px solid gray;
        background: white;
        border-radius: 2px;
        margin-left: 5px;
        margin-bottom: 2px;
    }      
    #green, #red {
        margin: 2px;
        margin-top: 8px;
        height:100px;
        width:200px;
    }
    #green {
        background: green;
    }
    #red {
        background: #ff9999;
    }
    .keyword {
        border:1px solid black;
        position: relative;
        padding:3px;
        margin:2px;
        width:190px;
        float:left;
    }
</style> 

<input type='text' id='newArea'/><button id='pridaj'>pridaj kluc slovo</button><br />
<div id='green' class="sortable"></div>
<div id='red' class="sortable"></div>

<script type="text/javascript">
$(function() {
    $(".sortable").sortable({
        connectWith: ".sortable"
    });

    $('#pridaj').click(function() {
        $("<div class='keyword'>" + $('#newArea').val() + "</div>").appendTo('#green');
        $('#newArea').val('');

    });

});           
</script>

#普里达吉{
边框：1px纯色灰色；
背景：白色；
边界半径：2px；
左边距：5px；
边缘底部：2px；
}      
#绿色、#红色{
保证金：2倍；
边缘顶部：8px；
高度：100px；
宽度：200px；
}
#绿色的{
背景：绿色；
}
#红色的{
背景:#ff9999；
}
.关键字{
边框：1px纯黑；
位置：相对位置；
填充：3倍；
保证金：2倍；
宽度：190px；
浮动：左；
}
普里达吉·克鲁克·斯洛沃

$（函数（）{
$（“.sortable”）.sortable({
连接到：“.sortable”
});
$（'#pridaj'）。单击（函数（）{
$（“+$”（“#newArea”）.val（）+”）.appendTo（“#green”）；
$（'#newArea'）.val（''）；
});
});           

要进一步了解这一点并处理掉的元素，您可以将上述代码调整为：

$(".sortable").sortable({
    connectWith: ".sortable",
    receive : function(event, ui) {
        alert("You just dropped "+ui.item.context.innerHTML);
    }
});

在这里，您可以通过使用ui.item.whatever引用被删除的项目（在本例中是一个声明内部html的警报），对其执行任何您想要的操作

使用console.log（ui.item）也非常有用

---

我希望这能有所帮助。

以下是我的计算结果。注意，代码下面的演示略有不同，因此您不必每次都在输入中键入文本进行测试

jQuery(document).ready(function() {
    var $red = $('#red'),
        $green = $('#green'),
        $pridaj = $('#pridaj'),
        $keyword = $('#keyword'),
        $keywords = $('<div class="keyword">');

    $red
        .disableSelection()
        .sortable({
            deactivate: helper,
            receive: helper
        });

    $pridaj.click(function(){
        $keywords
            .clone()
            .text($keyword.text())
            .appendTo($green)
            .disableSelection()
            .draggable({
                connectToSortable: $red,
                helper: "clone",
                revert: "invalid",
                start: helper,
                stop: helper
            });

        $keyword.one('focus', clear);
    });

    function clear() {
        this.value = '';
    }

    function helper(event, ui) {
        if (event.type == 'dragstart') {
            $(this).hide();
        }

        if (event.type == 'sortdeactivate') {
            $(ui.item).show();
        }

        if (event.type == 'dragstop') {
            $(this).filter(':hidden').remove();
        }
    }

});​

jQuery（文档）.ready（函数（）{
变量$red=$（“#red”），
$green=$（“#green”），
$pridaj=$（“#pridaj”），
$关键字=$（“#关键字”），
$keywords=$（''）；
$red
.disableSelection（）
.可排序({
停用：助手，
接收：助手
});
$pridaj.单击（函数（）{
$keywords
.clone（）
.text（$keyword.text（））
.appendTo（绿色）
.disableSelection（）
.拖拉({
ConnectToPortable:$red，
助手：“克隆”，
回复：“无效”，
开始：助手，
停止：助手
});
$keyword.one（'focus'，clear）；
});
函数clear（）{
这个值=“”；
}
函数助手（事件、用户界面）{
如果（event.type==“dragstart”）{
$（this.hide（）；
}
if（event.type==“sortdeactivate”）{
$（ui.item）.show（）；
}
如果（event.type=='dragstop'）{
$（this）.filter（':hidden'）.remove（）；
}
}
});​

---

$.live（）

已被弃用，是处理新元素事件的一种糟糕方法（由jQuery开发团队）。改为使用，您可以将其放在包含您要捕获的元素的元素上。或者在这种情况下，在插入

按钮时，在
.keyword
上附加
$.draggable（）
。我还没有解决跳转问题，但请看我上面的建议：这是可排序的影响可拖动的。添加一个
.ui可排序帮助程序
类，并对样式进行操作，从而更改样式并改变
.keyword
可拖动的显示方式。我还不知道该怎么办，但我现在的处境是：它有效吗？您在
$（document）.ready（）
中有一个速记
$（document）.ready（）
，所以我不知道它是否会运行。然而，导致问题的是可排序表本身。所以我想知道你这样做是否能解决这个问题。谢谢，解决了冗余问题。但是是的，它确实有效。检查它实际上是一种特定类型的可拖放功能。请参阅：这个问题与您应该使用
helper:'clone'
使其正常工作有关。但问题是，你现在在绿色广场有两个……蒂姆，这让我很满意。谢谢你，好主意！但我还有一个问题，可以处理移动的对象吗？有些人喜欢。。。伪代码：
如果（这个）。放弃做点什么…
是啊，太好了，这对我帮助很大！这在某种程度上是欺骗：没有可拖动的，所以当然，这很容易，因为没有克隆。我不知道@user1666761是否也打算使用draggable，但这并没有像删除克隆一样“修复”克隆问题。