[英]jQuery: Draggable div creating Clone initially, then not after being dropped
[英]draggable div is not being dropped at droppable div in jquery
我在jquery的拖放功能方面遇到麻煩,我有以下代碼可以拖動元素,但droppable元素不接受,有人可以指出此腳本有什么問題嗎?謝謝
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
我認為您的代碼很好,只需為droppable設置一些寬度和高度即可。
<html> <head> <title>CRM</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script> <script> $(document).ready(function(){ $(".dragable").draggable({ cancel:"a.ui-icon", revert:true, helper:"clone", cursor:"move", revertDuration:0 }); $('.droppable').droppable({ accept: ".dragable", activeClass: "ui-state-highlight", drop: function( event, ui ) { // clone item to retain in original "list" var $item = ui.draggable.clone(); $(this).addClass('has-drop').html($item); } }); }); </script> <style> .droppable{ width:200px; height:200px; border: 1px solid black; } </style> </head> <body> <div class="main-container"> <div class="wrapper"> <div class="tb-head"> <div class="target"> <span class="target-span">Target</span> </div> <div class="user1"> <span class="user1-span">User1</span> </div> <div class="user2"> <span class="user2-span">User2</span> </div> <div class="user3"> <span class="user3-span">User3</span> </div> <div class="user4"> <span class="user4-span">User4</span> </div> <div class="clear"></div> </div> <div class="tb-body"> <div class="inner-target"> <div class="dragable"> <span class="targetinn-span">Target Lead</span> </div> <div class="dragable"> <span class="targetinn-span">Assign1 Lead</span> </div> <div class="dragable"> <span class="targetinn-span">Assign2 Lead</span> </div> <div class="dragable"> <span class="targetinn-span">Assign3 Lead</span> </div> </div> <div class="inner-user1"> <div class="droppable"> <span class="user1inn-span"></span> </div> </div> <div class="inner-user2"> <div class="droppable"> <span class="user2inn-span"></span> </div> </div> <div class="inner-user3"> <div class="droppable"> <span class="user3inn-span"></span> </div> </div> <div class="inner-user4"> <div class="droppable"> <span class="user4inn-span"></span> </div> </div> <div class="clear"></div> </div> </div> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.