可拖放和拖动附加不起作用答案

【问题标题】：droppable and draggle append not working可拖放和拖动附加不起作用
【发布时间】：2014-08-10 14:24:32
【问题描述】：

我正在尝试将图像拖到放置区域，然后根据那里的数据属性将 div 附加到放置区域。

但目前它只是附加图像并说未定义不是一个函数。然后我需要能够在拖放区周围拖动新的 div

这里是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>

这里是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));
            }
        });

【问题讨论】：

我假设您使用的是 jquery ui？您可能应该创建一个小提琴以便于调试。 jsfiddle.net

标签： javascript jquery html draggable droppable

【解决方案1】：

试试这个

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;
}

【讨论】：

我们都使用谷歌图片源是巧合吗？哈哈
我在所有小提琴中都使用谷歌徽标，大多数其他人可能会这样做
是的，这将是我的第一个来源，我们俩都这样做很有趣:)
当我在他之前 10 分钟发布相同的解决方案时，你如何接受他接受的答案？

【解决方案2】：

您有几个问题。这是一个带有一些更正和示例的小提琴......

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

你的第一个问题来了

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

Add 未定义在您尝试使用它的位置，如果您尝试使用 appendTo，它还需要是一个 jquery 对象。

还有一些其他问题，但我的小提琴有更正，您需要更改它以满足您的需要。

【讨论】：