droppable and draggle append not working

Question

I am trying to drag images onto the drop zone, then based on there data attribute append a div to the drop zone.

But at the moment its just appending the image and saying undefined is not a function. I then need to be able to drag the new divs around the drop zone

here is the html

<ul class="tab-list">
                        <li>
                            <img src="img/one.png" data-itemstate="rectangle" />
                        </li>
                        <li>
                            <img src="img/one.png" data-itemstate="circle" />
                        </li>
                        <li>
                            <img src="img/one.png" data-itemstate="triangle" />
                        </li>
</ul>

here is the js

    $('.tab-list img').draggable({
            helper: "clone",
        });

        $('#main').droppable({
            drop:function(event, ui) {
                var item = $(ui.draggable);

                console.log(item.data('itemstate'));

                if(item.data('itemstate') == 'triangle'){
                    var add = '<div class="triangle"></div>';
                }
                add.appendTo($(this));
            }
        });

I'm assuming you are using jquery ui? You should probably create a fiddle just for easier debugging. jsfiddle.net — Scott Mitchell, Aug 10 '14 at 14:47

score 1 · Accepted Answer · answered Aug 10 '14 at 15:09

1

Try this

http://jsfiddle.net/harshdand/bqhhpwuq/

$('.tab-list img').draggable({
            helper: "clone",
        });

        $('#main').droppable({
            drop:function(event, ui) {
                var item = $(ui.draggable);

                var add;
                if(item.data('itemstate') == 'rectangle'){
                    add = '<div class="triangle"></div>';
                }
                $(this).append(add);
            }
        });

css:

img{
    width:50px;
    height:50px;
}

div{
    border:1px solid;
    width:20px;
    height:20px;
}

#main{
    width:200px;
    height:200px;
    border:2px solid;
}

answered Aug 10 '14 at 15:09

Harsh

1,072
1
10
16

Is that a coincidence that we both used google image source? hah – Scott Mitchell Aug 10 '14 at 15:54
i use google logos in all fiddles most of others may do the same – Harsh Aug 10 '14 at 15:56
Yes it would be my first source just funny that we both did :) – Scott Mitchell Aug 10 '14 at 15:57
How do you take his accepted answer when I posted 10 minutes before him the same solution? – Scott Mitchell Aug 10 '14 at 16:59

Scott Mitchell · Answer 2 · 2014-08-10T15:55:34.410

You have a couple issues. Here is a fiddle with some corrections and an example...

http://jsfiddle.net/woobntbL/1/

Your first problem is here

if(item.data('itemstate') == 'triangle'){
  var add = '<div class="triangle"></div>';
}
add.appendTo($(this));

Add is not defined where you are trying to use it and it also needs to be a jquery object if you are trying to use appendTo.

There are some other issues but my fiddle has corrections you will obv need to change it to suit your needs.

droppable and draggle append not working

2 Answers2