Question

我正在尝试将图像拖到放置区域，然后根据数据属性将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));
            }
        });

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

Answer 2

你有几个问题。这里有一些改动和一个例子......

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

你的第一个问题就在这里

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

在您尝试使用它的地方没有定义Add，如果您尝试使用appendTo，它也需要是一个jquery对象。

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

可放置和可拖动附加不起作用

2 个答案: