Question

我用按钮将元素添加到绿色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();
    });

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

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

Answer 1

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

我尝试将其缩小并以稍微不同的方式进行。

BTW它有助于保持你的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>

Answer 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）;

也非常有用

我希望这会有所帮助。

Answer 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/

实时可拖动的div - 位置，排序奇怪的行为

3 个答案: