可拖放和拖拽追加不起作用

droppable and draggle append not working

本文关键字：追加 不起作用 拖放      更新时间：2023-09-26

我试图将图像拖放到拖放区，然后根据那里的数据属性追加一个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));
            }
        });

试试这个

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

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

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

你的第一个问题在这里

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

Add是没有定义的，如果你试图使用它，它也需要是一个jquery对象，如果你试图使用appendTo。

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

相关文章：