jQueryの：ドロップ可能に

HTMLファイルは動作しません：jQueryの：ドロップ可能に

<!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ファイルを、非常に良い作品： ;

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

}); });

機能は「ドロップ可能な」動作しないと私はバグに気づくことができません。

出典

2016-10-18 Slawek_Desu

インデントなどを保持して、コードを読みやすくするようにしてください。あなたがした場合、あなたは、その通知を持っているでしょう：

をあなたの$(document).ready() -function外droppable -objectsを定義し、どのようなエラーが発生し、
あなたは（あなたの$(document).ready() -function 2回を閉じ)};がありますあなたのコードの末尾にずっとへ。

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

このコードを試してみるとうまくいく可能性があります。

出典

2016-10-18 21:21:07 Dario

jQueryの：ドロップ可能に

答えて

関連する問題