CODEWITHSUNDEEP
jqueryjquery-uidrag-and-dropdraggable
katie hudson
katie hudson

Reputation: 2893

JQuery drag and drop elements onto div

I am using JQuery UI, more specifically Draggable and Sortable.

At the moment, I have the following markup

<div class="col-lg-3" id="ddForm">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <span class=""></span>Elements
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <ul class="list-group">
                <li class="list-group-item draggable"><span class="fm-header-icon"></span>Heading</li>

                <li class="list-group-item draggable"><span class="fm-textbox-icon"></span>Text Box</li>

                <li class="list-group-item draggable"><span class="fm-textarea-icon"></span>Text Area</li>

            </ul>
        </div>
    </div>
</div>

<div class="col-lg-9 bgGrey sortable">


</div>

I have set up a JSFiddle here JSFiddle

What I am trying to do is create a type of form builder. So in the left panel, I display different form elements. You can then drag these to the grey div, and the element should take up the width of the div. Essentially, I am trying to build something similar to the following Link

I have managed to make the form elements draggable, but my first problem is being able to drop them onto my div. How would I go about doing this?

Any advice appreciated.

Thanks

Upvotes: 1

Views: 2070

Answers (1)

Uttam Kumar Roy
Uttam Kumar Roy

Reputation: 2058

Change connectToSortable: "#sortable" to 

connectToSortable: ".sortable"

Your Jquery should be like this

$(function() {
    $( ".sortable" ).sortable({
        revert: true
    });
    $( ".draggable" ).draggable({
        connectToSortable: ".sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

JsFiddle

Upvotes: 2

Related Questions