javascript - jQuery 购物篮

Question

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

基础看起来像这样:

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