0

私はこれに初心者なので、ここで大きな問題があります。

jquery ui を使用して div をドラッグ アンド ドロップしますが、ドラッグを開始するときに div を複製する必要があります。

このコードを試してみましたが、何か問題があります:

google.maps.event.addListener(map, 'tilesloaded', function(evt) {
$(function() {
    $( ".draggable" ).resizable();
  $( ".draggable" ).draggable({revert: 'invalid', helper: 'clone', snap: "#drop_here td", opacity: 0.7});
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $( this )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });    });

デモ: http://jsbin.com/erofot/17

このコードが機能しない理由を知っている人はいますか?

4

3 に答える 3

2

ドラッグされているオブジェクトのクローンを作成する必要がありますよね?

google.maps.event.addListener(map, 'tilesloaded', function(evt) {
  $(function() {
    $( ".draggable" ).resizable();
    $( ".draggable" ).draggable({ helper: 'clone', snap: "#drop_here td", opacity: 0.7});
    $( ".draggable" ).draggable({
        start: function() {
            var drgClone = $(this).clone(true);
        }
    })
    $( "#drop_here td" ).droppable({
      accept: '.draggable',
      drop: function( event, ui ) {
        $(this).append($(ui.draggable).clone());
      }
    });
  });
});
于 2013-07-02T03:58:29.270 に答える
0

この機能を拡張する必要があります。DevlshOneの答えは機能しています。しかし、複製された要素をドラッグ可能にする必要があります。「ドラッグ可能」がクラスのリストに含まれていても、現在はそうではありません。

ところで、スナップは何のためにあるのですか？

snap: "#drop_here td",
于 2014-06-27T15:48:13.030 に答える