1

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

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

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

4

3 回答 3

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>
于 2012-12-15T03:42:21.817 回答
1

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

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

通过使用 ui.item.whatever 引用它，您可以对拖放的项目做任何您想做的事情（在这种情况下是一个说明内部 html 的警报）

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

我希望这有帮助。

于 2012-12-15T11:39:42.563 回答
1

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

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/

于 2012-12-15T11:45:41.613 回答