JQuery购物篮

Question

我想实现一种购物篮。想法是用户能够将某些可拖动图像放入特定区域，而图像的父图像则更改为购物车的div。

Base看起来像这样：

 <div id="box">

      <div id="basketContainer"></div>


      <img src="./imgTrue.jpg" class="toggleImage"></img>

    </div>

以下是我的尝试：

$('#basketContainer').droppable({
        drop:function(e,source){
            $(source).appendTo('#basketContainer');

        }
      });

这就是我得到的：

jquery-3.2.1.min.js:2 Uncaught TypeError: Cannot read property 'ownerDocument' of undefined

我该如何解决？

Answer 1

检查此代码：https://codepen.io/anon/pen/opPReb

您需要至少有一个可拖动项目和另一个可放置容器来执行该行为。您应该更改选择器以获取元素或元素数组。

$(source.draggable[0]).appendTo(this);

<div id="box">
    <div id="basketContainer"></div>
    <img id="draggable" src="https://jqueryui.com/jquery-wp-
       content/themes/jquery/images/logo-jquery-ui.png" class="toggleImage">
    </img>
</div>

#draggable {
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0;
}

#basketContainer { 
    width: 300px; 
    height: 300px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
    background: red;
}

$('#draggable').draggable();
$('#basketContainer').droppable({
    drop:function(e,source){
        $(source.draggable[0]).appendTo(this);
    }
});

Answer 2

查看记录的元素，您需要使用$（source.draggable [0]）来获取您尝试追加的元素。