Creating Element from JQuery Drag and Drop

Hi I want to be able to create html elements based on drag and drop functionality. I want to use the Jquery UI Library to do this. The HTML Code is here http://pastebin.com/0cn5FDWr

What I want to do is on the when an item is dropped I want to check which item is being dropped and then append some html elements after the drop div (i.e create an input tag, image etc...).

Not sure how I would do this, if this can be done by calling custom function containing the co开发者_如何学Cde then it would be good.

Thanks

First you should specify which elements you want the droppable to accept. You do this by setting the accept option to .drag().

I've made a two small examples on jsFiddle, the first one using sortable and the second using draggable/droppable.

• example 1
• example 2

You can have an external function in the drop call that receives the dropped element and based on that you add whatever you want:
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.