JQueryドラッグアンドドロップから要素を作成

Question

こんにちは、ドラッグ＆ドロップ機能に基づいてhtml要素を作成したいと考えています。私はこれを行うには、JqueryのUIライブラリを使用したいと思います。 HTMLコードはここにありますhttp://pastebin.com/0cn5FDWr

私がしたいことは、アイテムがドロップされたときです。ドロップされたアイテムをチェックしてから、ドロップdivの後ろにいくつかのhtmlエレメントを追加したいと思います。等...）。

これを行う方法がわからない場合は、コードを含むカスタム関数を呼び出すことでこれを行うことができます。

おかげ

Answer 1

あなたはドロップされた要素を受け取り、ドロップコールで外部関数を持っているとあなたが欲しいものは何でも追加することに基づくことができます。
Javascriptを：

$(function() { 
    var $result = $('.result'); 
    $('.drag').draggable({ 
     revert: "invalid" 
    }); 
    $('.drop').droppable({ 
     drop: function(e, ui) { 
      outputResult(ui.draggable); 
     } 
    }); 

    function outputResult(elm) { 
     if ($(elm).hasClass('oTextInput')) { 
      $result.append('<input type="text" />'); 
     } else if ($(elm).hasClass('oRadioInput')) { 
      $result.append('<input type="radio" />'); 
     } 
    } 
}); 

HTML：

<div> 
    <div class="drag oTextInput">Drag me!</div> 
    <div class="drag oRadioInput">Drag me!</div> 
    <div class="drag">Drag me!</div> 
    <div class="drag">Drag me!</div> 
    <div class="drag">Drag me!</div> 
    <div class="drag">Drag me!</div> 
    <div class="drag">Drag me!</div> 
</div> 
<div class="drop">drop here!</div> 
<div class="output"> 
    <h2>Results:</h2> 
    <div class="result"></div> 
</div> 

Example link。

Answer 2

まず、あなたが受け入れるドロップ可能をたい要素を指定する必要があります。これを行うには、オプションを.drag()に設定します。

私はjsFiddle、ドラッグ/ドロップ可能を使用してソート可能を使用して最初のものと第二の二つの小さな例を作りました。

• example 1
• example 2