ドラッグ可能な要素は、Jquery UIを使用してドロップ後もドラッグできなくなりました

以下は私のコードです。ドラッグ可能な要素は、Jquery UIを使用してドロップ後もドラッグできなくなりました

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#draggable").draggable(); 
 
    $("#droppable").droppable({ 
 
     drop: function(event, ui) { 
 
     $(this) 
 
      .addClass("ui-state-highlight") 
 
      .find("p") 
 
      .html("Dropped!"); 
 
     } 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me to my target</p> 
 
</div> 
 
    
 
<div id="droppable" class="ui-widget-header"> 
 
    <p>Drop here</p> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

ここでは私がやりたいドラッグ＆container.What内でドロップされます、それは誰もが解決策が親切に助けて知っているcontainer.Ifドロップから再びドラッグすることはできませんドラッグした後で、ドロップ私はこの問題を得るために。

出典

2016-12-22 Kavya Shree

ドロップ要素用のプラグインを初期化 – madalinivascu

こんにちは、ドラッグ可能なイベントは、一度削除すると無効になります。

$（ "#draggable"）.draggable（ 'disable'）;

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Droppable - Default functionality</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
 
    <style> 
 
    #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } 
 
    #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; } 
 
    </style> 
 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
    <script> 
 
    $(function() { 
 
    $("#draggable").draggable(); 
 
    $("#droppable").droppable({ 
 
     drop: function(event, ui) { 
 
     $(this) 
 
      .addClass("ui-state-highlight") 
 
      .find("p") 
 
      .html("Dropped!"); 
 
     $("#draggable").draggable('disable'); 
 
     } 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<div id="draggable" class="ui-widget-content"> 
 
    <p>Drag me to my target</p> 
 
</div> 
 
    
 
<div id="droppable" class="ui-widget-header"> 
 
    <p>Drop here</p> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

出典

2016-12-22 07:34:27

私は、コードスニペットを走った、と私は黄色い1の内側にそれを落とした後白いボックスをドラッグすることはできません。 – inyourcorner

@inyourcorner黄色のボックスの中でドラッグ可能にしたい場合は、$（ "#draggable"）.draggable（ 'disable'）;を削除してください。この。 –

それは今、ありがとう – inyourcorner

ドラッグ可能な要素は、Jquery UIを使用してドロップ後もドラッグできなくなりました

答えて

関連する問題