CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
jeremib
jeremib

Reputation: 751

Drag element from a list to a div

I'm trying to build a drag and drop letter editor. Basically the elements will be on the left that can be dragged over, and the letter workspace will be on the right. On the right side, they should be able to move the draggable elements wherever they want. Once they drag an item from the left to the right, it should not remove the element from the list, but rather show the hidden div on the right. Which would allow them to copy over the same element multiple times.

    jQuery( "#letter .draggable" ).draggable({ 
    grid: [ 20, 20 ],
    containment: "parent",
    stop: function(event, ui) {
        var $newPosX =  jQuery(this).offset().left - jQuery(this).parent().offset().left;
        var $newPosY =  jQuery(this).offset().top - jQuery(this).parent().offset().top;

        console.log($newPosX.toString() + ', ' + $newPosY.toString());
    }
});

Here's an example fiddle where I've got the layout and CSS, and the initial draggable. Just need help connecting the two.

Upvotes: 0

Views: 746

Answers (1)

jmm
jmm

Reputation: 990

I think I came up with a fiddle that is on track for what you want.

You should look at this jQuery UI droppable demo. I copied that jQuery code in the fiddle basically from the shopping cart interaction of the droppable demo.

$( "#letter-elements li" ).draggable({
    appendTo: "body",
    helper: "clone",
    connectToSortable: "#letter"
});

$( "#letter" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",

}).sortable({
     grid: [ 20, 10 ]        
});

Some things to help clean up your code, you are using a css style sheet so you should get rid of the HTML style tags.

You use a list on the left, but your Test is a span on the right. Think its better to stick with lists on both sides.

Your first list item labeled County seal has a hidden picture, not sure why but if you want pictures to show when they move over to the right you might want to add a class to limit the size of the picture.

Upvotes: 1

Related Questions