jQuery를 사용하여 동적으로 dom 요소를 만든 다음 드래그 가능하게 만듭니다. 드롭 대상이 있지만 요소가 드래그되지 않습니다. 무엇이 문제일까요? 다음은 전체 페이지입니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<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; }
ul
{
list-style-type: none;
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
for (var i = 0; i < 9;i++){
var li = $('<li>');
var btn = $("<button type='button' tabindex='-1' class='matrix-item' data-value='" + i + "' title='" + "My title" + "'> Button " + i + "</button>").draggable();
li.append(btn);
$(".holder ul").append(li);}
});
</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>
<div id="container">
<div class="holder">
<ul></ul>
</div>
</div>
</body>
</html>
미리 감사드립니다.
버튼을 끌 수 없으므로 버튼에 기본 클릭 기능이 있습니다. div로 전환하면 작동합니다. 여기에서 확인하십시오 : http://jsfiddle.net/swm53ran/319/
var btn = $("<div type='button' tabindex='-1' class='matrix-item draggable' data-value='" + i + "' title='" + "My title" + "'> Button " + i + "</div>").draggable();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다