CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uidraggable
Chris C
Chris C

Reputation: 1

How to properly use AppendTo with Draggable() in JQuery ui?

So I currently am attempting to make my first website (so forgive me for the very sloppy code!) and am having a bit of trouble getting the draggable function to work how I want it to.

This is the first part where I create the divs and set all of the information to how I want it to be. Basically it's using an api to get item information from a game and then is making a display for that item.

<div class='item' id='item"+itemid+"' title='Item'>\n<div class='item_image'><img src='http://ddragon.leagueoflegends.com/cdn/5.2.1/img/item/"+item.image.full+"' style='z-index: 1;position: absolute;'><img src='images/item_border.png' style='z-index: 2;position: absolute;'></div>\n<div class='item_name'>"+item.name+"</div><br>\n<div class='item_cost'><img src='images/gold.png'> "+item.gold.total+"</div></div><br>\n

I then tried to make the whole "itemid" div draggable, but when it's dragged I only want the item image to be shown under your cursor, not the whole div. If I understand this correctly, that's what the "appendTo" is used for:

        $("#item"+itemid).draggable({
            containment: "window",
            appendTo: "#item"+itemid+" .item_image",
            helper: "clone",
            distance: 25,
            opacity: .8,
            scroll: false,
            stack: "div",
            revert: true
        });

However whenever I try to drag something using this, it shows not just the item image+the border, but also the item name and item cost, although the gold image is at a bigger scale than it normally is when not being dragged.

How would I make it work so it only shows the image, and not the whole thing when being dragged? Also, why is it showing the whole div if the one I selected for the appendTo is only the image?

Thanks in advance!

Upvotes: 0

Views: 2244

Answers (1)

cool
cool

Reputation: 788

The question: "How appendTo works in Draggable()?"

I will try to answer that. the short answer is "Which element the draggable helper should be appended to while dragging." If you have problem understanding this sentence (like I had) let me explain it:

To explain appendTo I have to explain helper first, because they are kind of related to each other. when you start dragging an element using helper, you have three options:

1- helper: 'original'  //default
2- helper: 'clone'
3- helper: function(){ return "an element" }

1 - The first option is "default" and it means the dragging element is the element itself and it has it's own position in the DOM TREE and appendTo option doesn't work in this situation. The element doesn't append to anything, it is in the same situation as before in the DOM TREE.

2 - The second option is "clone" and it means the dragging element is not the same element you start to drag, it's another element copied from the first one. Now, since we can't have an orphan element, who is the parent of the new copied element? well you should answer this in the appendTo option.

3 - The third option is "an element" returning from a function. It is something like:

helper: function(){ return $("<p>YES</p>"); }

And again this new "p" can't be an orphan element so again we attach it to an element which is selected in appendTo option.

At the end you should know that the appendTo is just doing his job while you are dragging the element and after dropping the helper will gone (unless you attach it to an element) and the appendTo will finish his job.

Upvotes: 2

Related Questions