jQuery的拖动n下降无法正常工作，请查看我的代码
[英]jquery drag n drop not working please review my code
问题描述
I have three buttons and I want to drag it in droppable div but it is not working. 
我有三个按钮，我想将其拖动到可放置的div中，但它不起作用。 Please review my code and suggest me for best 请查看我的代码并建议我最好
<body>
<form method="post" action="Dashboard.aspx" id="form1">
<script type="text/javascript">
$('#play1').draggable();
$('#Yasin2').draggable();
$('#page3').draggable();
$('#page24').draggable();
$('#divScene').droppable({
drop: function (event, ui){
var ID = $(ui.draggable).attr('id');
alert(ID);
}
});
</script>
<div>
<input type="submit" name="btnAddScene" value="Add" id="btnAddScene" style="float:right; height: 26px;">
<h1>Scene(s)</h1>
</div>
<div id="divScene" class="ui-droppable" style="border-style:solid; border-width:5px; padding:20px 20px 20px 20px;">
<input type="button" class="ui-draggable" name="play1" value="play" onclick="return false;__doPostBack('play1','')" id="play1" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="Yasin2" value="Yasin" onclick="return false;__doPostBack('Yasin2','')" id="Yasin2" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="page3" value="page" onclick="return false;__doPostBack('page3','')" id="page3" class="ui-widget ui-state-default ui-corner-all" title="Scene">
<input type="button" class="ui-draggable" name="page24" value="page2" onclick="return false;__doPostBack('page24','')" id="page24" class="ui-widget ui-state-default ui-corner-all" title="Scene">
</div>
</form>
</body>
</html>
2 个解决方案
解决方案1
0 2014-04-24 08:57:40
Firstly, you need to include jQuery and jQuery UI in your page: 首先，您需要在页面中包含jQuery和jQuery UI：
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
After that,you need to wrap your jQuery code inside DOM ready handler $(function() {...}); 之后，您需要将jQuery代码包装在DOM ready处理程序$(function() {...}); to make sure all of your DOM elements have been loaded properly before executing your jQuery code: 确保在执行jQuery代码之前已正确加载所有DOM元素：
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
$(function () {
$('#play1').draggable();
$('#Yasin2').draggable();
$('#page3').draggable();
$('#page24').draggable();
$('#divScene').droppable({
drop: function (event, ui) {
var ID = $(ui.draggable).attr('id');
alert(ID);
}
});
});
</script>
解决方案2
0 已采纳 2014-04-26 20:54:07
错误是可拖动的，可放置在按钮上不起作用，仅在div上有效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.