ドロップ後のドラッグ可能なアイテムとドロップ可能なアイテムへのタグの追加

1つのdivに順序付けられていないリストがあり、これらのリストアイテムを別のdiv要素にドラッグアンドドロップすると、その中に新しいdivを作成したいこのリストアイテムを含む古いdivは新しいdivに新しいタグを追加できるようになりました。私は、JQueryのドラッグアンドドロップ可能なウィジェットを使用しています。これどうやってするの？ドロップ後のドラッグ可能なアイテムとドロップ可能なアイテムへのタグの追加

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#source li').draggable({ 
      helper: 'clone', 
      revert: 'invalid' 
     }); 
     $('#divCountries').droppable({ 
      accept : 'li[data-value="country"]', 
      drop : function(event, ui){ 
       $(this).append(ui.draggable); 
       return '<div>' + $(this).text() + '</div>' 
      }, 
     }); 
     $('#divCities').droppable({ 
      accept : 'li[data-value="city"]', 
      drop : function(event, ui){ 
       $(this).append(ui.draggable); 
       return '<div>' + $(this).text() + '</div>' 
      }, 
     }); 
    }); 
</script>

そして、これは私のbodyタグである：ここで

は私のスクリプトです

<body style="font-family: Arial"> 
<form id="form1" runat="server"> 
    <div class="divClass"> 
     Countries & Cities 
     <ul id="source"> 
      <li data-value="country">USA</li> 
      <li data-value="country">Germany</li> 
      <li data-value="country">UK</li> 
      <li data-value="city">New York</li> 
      <li data-value="city">Berlin</li> 
      <li data-value="city">London</li> 
     </ul> 
    </div> 
    <div class="divClass" id="divCountries"> 
     Countries 

    </div> 
    <div class="divClass" id="divCities"> 
     Cities 

    </div> 
</form>

出典

2017-10-31 Vaxo Basilidze

私たちに関連するすべてのコードとどのようなあなたは、私はあなたがあなたのコードの写真を含めるべきではありません –

を試してみましたを示してください。コード関数 '{}'またはスニペット関数を使用してコードを貼り付けます。 –

いくつかのコードスニペットを追加した –

私の推測では、あなたがui.draggable要素を編集する必要がありますということです。

ドロップ機能で

var item = $(ui.draggable).data('test', 1); 
$(this).append(item);

ような何か。それは要素にデータを添付します。 .divにそれをラップすることもできます。.divを手動で作成して、要素を代わりに接続します。

var item = $('<div data-test="foo">').append(ui.draggable); 
$(this).append(item);

出典

2017-10-31 09:35:10

2番目のスニペットは私のためにうまくいきました。あなたの助けをありがとう:) –

それは助けてうれしいい喜んで:) –

ドロップ後のドラッグ可能なアイテムとドロップ可能なアイテムへのタグの追加

答えて

関連する問題