2

編集:最後のクローン要素をドロップ可能な任意の位置にドラッグできるようにしたいのですが、ソート可能にしたくありません。

ドロップされたときに、ドラッグ可能なクローン要素をドロップ可能な要素に追加しようとしています。ドラッグ可能な要素がドロップ可能な要素内にある 場合、それ(ドラッグ可能な要素)をドロップ可能な内にドラッグ可能にしたい。現在、ドラッグ可能なクローン要素はその位置からドラッグでき、ドロップするとドラッグできなくなります。だから、私の目標を達成するのを手伝ってください。ありがとう。

コードは次のとおりです。

$(function () {

    $('#draggable').draggable({
        helper: 'clone'
    });

    $('#droppable1, #droppable2').droppable({
        drop: function (event, ui) {
            $(this)
                .append(ui.helper.clone(false).css({
                position: 'relative',
                left: '0px',
                top: '0px'
            }));
        }
    });

});
.well {
    width: 150px;
    height: 150px;
    border: 3px solid red;
}
.ii{
  float:left;
  margin-top: 20px;
  margin-right: 20px;
  border: 3px solid blue;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>

<div class="well">
    <div id="draggable">CONTENT</div>
</div>
<div id="droppable1" class="ii well col-md-3" style="z-index:-1;"></div>
<div id="droppable2" class="ii well col-md-9" style="z-index:-1;"></div>

4

1 に答える 1

1

最初の要素は、ドキュメントの準備完了イベントでドラッグ可能な要素として作成されますが、ドロップ時に作成される新しい要素では、このコードが実行されることはありません。「ドロップ」イベントに追加する必要があります。

$('#droppable1, #droppable2').droppable({
    drop: function (event, ui) {        
        $(this)
            .append(ui.helper.clone(false).css({
            position: 'relative',
            left: '0px',
            top: '0px'
        }));
        /* New stuff here: */
        $('.ui-draggable').draggable({
            helper: 'clone'
        });
    }
});
于 2016-09-20T20:10:23.010 に答える