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

これをもう少し進めて、ドロップされた要素を処理するには、上記のコードを次のように調整できます。

$(".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

.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

これが私が解決したものです。コードの下のデモは少し異なるため、テストするたびに入力にテキストを入力し続ける必要はありません。

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 に答える