Live draggable div - 位置，排序奇怪的行为答案

【问题标题】：Live draggable div - position, sorting weird behaviourLive draggable div - 位置，排序奇怪的行为
【发布时间】：2012-12-15 01:43:58
【问题描述】：

我用按钮将元素添加到绿色 div，然后我想拖动它们做红色 div。在拖动时（只是移动到红色元素）它会移动（或小跳跃）。看看我的小提琴：http://jsfiddle.net/KzWkS/ 试试看。

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

而且..如果我想把它们拖回来，它也会做这些事情......

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

【问题讨论】：

$.live() 已被弃用，这是处理新元素事件的糟糕方法（由 jQuery 开发团队提供）。请改用$.on()，您可以将其放在包含您要捕获的元素的元素上。
或者在这种情况下，当.keyword 插入button 点击时，将$.draggable() 附加到.keyword。
我还没有解决跳跃问题，但请看这个小提琴我上面的建议：jsfiddle.net/KzWkS/1
这是影响可拖动的排序。添加了一个.ui-sortable-helper 类并操纵了样式，这改变了样式并改变了.keyword 可拖动显示的方式。还没想好要做什么，但这是我所在的位置：jsfiddle.net/userdude/KzWkS/3

标签： javascript jquery-ui jquery-ui-sortable jquery-ui-draggable

【解决方案1】：

您不需要继续添加 .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>

【讨论】：

有效吗？你在$(document).ready() 中有一个速记$(document).ready()，所以我想知道它是否会运行。但是，导致问题的是可排序本身。所以我想知道你这样做的方式是否能解决问题。
谢谢，修复了冗余。但是，是的，它确实有效。检查jsfiddle.net/KzWkS/4
它实际上是一种特定类型的可拖放功能。请参阅：jqueryui.com/draggable/#sortable 该问题与您应该使用helper: 'clone' 使其正常工作有关。但是，问题是您现在在绿色方块中有两个...
蒂姆斯，我很满意。谢谢你，好主意！
但我还有一个问题，是否可以处理移动的对象？有些人喜欢...伪代码：if (this).dropped do something...

【解决方案2】：

为了更进一步处理被丢弃的元素，您可以将上面的代码调整为：

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

通过使用 ui.item.whatever 引用它，您可以对已放置的项目（在本例中为说明内部 html 的警报）做任何您想做的事情

使用console.log(ui.item)也很有帮助；

我希望这会有所帮助。

【讨论】：

是的，太好了，对我帮助很大！
这在一定程度上是作弊：没有可拖动的，所以当然，这很容易，因为没有克隆。我不知道@user1666761 是否也打算使用可拖动对象，但这并不能“修复”克隆问题，而是将其删除。

【解决方案3】：

这是我解决的问题。请注意，代码下方的演示略有不同，因此您不必每次都在输入中输入文本进行测试。

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

});

http://jsfiddle.net/userdude/KzWkS/8/

【讨论】：