CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrag-and-drop
Kavya Shree
Kavya Shree

Reputation: 1032

Drag and drop button inside textarea using JQUERY

Hii Everyone,

        Below is my sample screenshot.

enter image description here

And for understanding I will add one more picture. enter image description here

I want to give the input like paragraph and number of blanks and the below choices. Initially I will choose number of blanks needed for paragraph. Based on the choice buttons it will be visible like choice 1,2 etc. After that I will drag and drop that button inside the paragraph textarea so it will take that position as first blank similarly for any number of choices. For this scenario I tried so many different things, like below link If I drag and drop it will drop either in initial position of paragraph or else at end of paragraph. I want to drop at any position inside the paragraph. I cant fix this issue, so I'm looking for help.

Upvotes: 0

Views: 1780

Answers (1)

Chintan Pandya
Chintan Pandya

Reputation: 100

HTML

<ul id="left-pane">
    <li>
        <div align="center" style="width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;">Drag Me</div>
    </li>
</ul>

<ul id="right-pane"></ul>

JS

$("#left-pane li").draggable({
    containment: '#gbox',
    cursor: 'move',
    helper: 'clone',
    scroll: false,
    connectToSortable: '#right-pane',
    appendTo: '#right-pane',
    start: function () {},
    stop: function (event, ui) {}
}).mousedown(function () {});

$("#right-pane").sortable({
    sort: function () {},
    placeholder: 'ui-state-highlight',
    receive: function () {},
    update: function (event, ui) {}
});

$("#right-pane li").live('dblclick', function () {
    $(this).remove();
})

$("#right-pane").droppable({
    accept: "#left-pane li",
    accept: ":not(.ui-sortable-helper)",
    drop: function (event, ui) {
        if ($(ui.draggable).find('.single-item').length == 0)
        {
            $(ui.draggable).html("<div align=\"center\" style=\"width:100px;border:3px solid #ddd; padding:5px;cursor:move;background:#eee;\">Drag Me</div>");
        }
    }
});

$("#left-pane").droppable({
    accept: "#right-pane li",
    drop: function (event, ui) {}
});

$("ul, li").disableSelection();

CSS

#left-pane {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

#right-pane {
    border: 1px solid black;
    min-width: 100px;
    min-height: 100px;
}

.single-item {
    border:2px solid #ddd;
    background:#fff;
    margin:30px;
    padding:10px;
}

Here is similar fiddle to your problem. Check out below fiddle

Also Check out this JSBin Demo

Upvotes: 1

Related Questions