0

リストからさまざまなドロップ可能なコンテナーに要素をドラッグできるドラッグ アンド ドロップ ページに取り組んでいます。これは完全に機能します。私が今達成しようとしているのは、これらをあるコンテナーから別のコンテナーにドラッグする (またはコンテナー内で並べ替える) ことです。しかし、私はこれを行うことができないようです。

リストは、タイトル付きの色付きのボックスの連続のように見えます (それぞれのクラス名は「.item」です)。リストからドラッグすると、リストが同じままになるようにクローンが作成されます (つまり、ブロックは削除されません)。

クラス名が「dragrow1」と「dragrow2」の 2 つのコンテナー (この例) があります。ボックスをどの行にドラッグするかによって、ブロックの外観が変わります。これは正常に機能します。問題は、これらのボックスを、独自のコンテナーまたは別のコンテナー内で、それ自体を複製せずに再度ドラッグすることです (移動する必要があります)。ちなみに、クラス名はスタイル上の理由でドロップ後、「.item」から「.box」に変わります。すばらしいのは、色付きのボックスをコンテナにドラッグすると、適用された css スタイルにより、各ボックスが互いに隣り合って浮動し、左上隅から横に並んで配置されることです。

これまでの私のjqueryコードは次のようになります。

$(document).ready(function(){

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

  $(".dragrow1").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row1">'+dropElemTitle+' - some extra box content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row1').remove()});
    }

  });   
  $(".dragrow2").droppable({
    accept: ".items, .box",
    hoverClass: 'dragrowhover',
    tolerance: 'pointer',
    drop: function(ev, ui) {
      var dropElemId = ui.draggable.attr("id");
      var dropElemTitle = ui.draggable.attr("title");
      $(this).append('<div class="box" id="'+dropElemId+'row2">'+dropElemTitle+' - different content here</div>');
      $('div.box a').click(function(){$('#'+dropElemId+'row2').remove()});
    }
  });
});

コンテナ コードの例は次のようになります。

<div class="dragbox-content" style="display:block" >
  <div class="dragrow1">&nbsp;</div>
  <div class="dragrow2">&nbsp;</div>
</div>

誰でも私に何か指針を与えることができますか？

ありがとう、

アリ。

4

1 に答える 1

0

I found another way, by using draggable with sortable. You can see a separate topic here about it:

jQuery - manipulate dropped element in sortable list

I didn't figure out how to drag between containers yet because it is not actually a requirement.

Ali.

于 2010-01-20T16:45:17.120 に答える