CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortablejquery-ui-draggablejquery-ui-droppable
Maheep
Maheep

Reputation: 5605

JQuery drag drop does not show dragged item after drop into list

I have following Javascript code:

$(document).ready(function () {
    $(".NewsItemDraggable").draggable({ revert: "invalid" });
    $(".RelatedNewsDropDiv").droppable({
        accept: ".NewsItemDraggable",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function (event, ui) {
            AddReletedNewsItem(ui.draggable, $(this));
        }
    });
    function AddReletedNewsItem($draggedItem, $dropArea) {                
        var $list = $("ul", $dropArea).length ?
                    $("ul", $dropArea) :
                    $("<ul/>");
        $dropArea.append($list.append($("<li>").append($draggedItem)));
    }
});

HTML:

<-- Multiple occurance of following div-->
<div class="NewsItemDraggable" style="margin-top: 5px">
    Some html stuff here
    <div class="RelatedNewsDropDiv">
        Drop Related News Items Here
    </div>
</div>

When I drag any NewsItemDraggable into another NewsItemDraggable's RelatedNewsDropDiv it creates a new list item but does not show contents of dragged NewsItemDraggable. What seems to be the problem here? Will be happy if some guidance is given.

UPDATE:

After looking at web it looks like it might be related to JQuery Sortable but I am not able to understand how/what, or is it really related?

Upvotes: 0

Views: 337

Answers (1)

Gurbeer Singh
Gurbeer Singh

Reputation: 36

check this, made some change jsfiddle.net/DgAd7/13/

I am using helper: 'clone'

Upvotes: 1

Related Questions