Question

HTML文件：

<!DOCTYPE html> <html>
<head>
    <meta charset="utf-8" />
    <title>Drag and drop</title>
    <link rel="stylesheet" href="style.css">        
    <script src="jquery-3.1.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <ul>
        <li> Milk </li>
        <li> Bread </li>
    </ul>
    <div id ="list"></div>
</body> </html>

Css文件，效果很好：＆＃34;看起来您的帖子主要是代码;请添加更多详细信息＆＃34;

ul { padding: 0; list-style: none; color: red } #list {
width: 450px;
height: 450px;
background-color: #f0f0f0;
border: 1px solid #000;
overflow: auto; } #list.border {
border-width: 2px; }

jQuery文件：

$(document).ready(function () { $( 'li' ).draggable({containment: 'document', revert: true, start: function()
{
    contents = $(this).text();
}

}); $('#list').droppable({hoverClass: 'border', drop: function()
{
    $('#list').append(contents + '<br />');
}

}); });

功能＆＃34; droppable＆＃34;没有工作，我无法注意到这个错误。

Answer 1

你真的应该通过保持缩进等来尝试保持代码的可读性。如果你这样做，你会注意到：

您定义droppable - $(document).ready()以外的对象 - 功能，导致错误的原因，以及
关闭$(document).ready() - 功能两次（代码末尾有)};个。

$(document).ready(function () { 
  $( 'li' ).draggable({
    containment: 'document', 
    revert: true, 
    start: function() {
      contents = $(this).text();
    }
    
  $('#list').droppable({
    hoverClass: 'border', 
    drop: function() {
      $('#list').append(contents + '<br />');
    }
  }); 
});

尝试使用此代码，它可以正常工作。

jQuery：droppable不起作用

1 个答案: