【发布时间】：2016-10-13 09:12:52
【问题描述】：
您好，我正在创建一个 html 页面，我在其中使用 jQuery-ui 和 jquery-ui-punch 将一些 buttons 拖入一个 Div。但拖放不会发生。
我不明白为什么它不起作用。 sourcePopover 是弹出窗口，其中有我想在fav_id 中拖动的按钮。
这是我的 HTML/JavaScript 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap-theme.min.css">
<!--Font Awesome -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
/*Function to show popover when select button click*/
$(function(){
// Enables popover #2
$("#btn_select_source").popover({
container: 'body',
animation:true,
html : true,
content: function() {
return $("#sourcePopover").html();
},
title: function() {
return $("#sourcePopoverTitle").html();
}
})
});
$(function(){
$("#sourcePopover button").draggable({
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.removeClass("draggable");
var image = this.src.split("/")[this.src.split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
alert(image + " dropped.");
}
else {
alert(image + " not dropped.");
}
}
});
$("#fav_div").droppable({
drop: function (event, ui) {
if ($("#fav_div button").length == 0) {
$("#fav_div").html("");
}
ui.draggable.addClass("dropped");
$("#fav_div").append(ui.draggable);
}
});
});
</script>
<style type="text/css">
.draggable
{
filter: alpha(opacity=60);
opacity: 0.6;
}
.dropped
{
position: static !important;
}
</style>
</head>
<body style="background-color:#080808;" onload="init()">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 grid-padding-5px margin-top-10px">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 remove-grid-padding" id="fav_div">
<a data-toggle="popover" data-trigger="focus" id="a_select_source">
<button type="button" class="btn btn-secondary" id="btn_select_source" onclick="buttonSourcePressed(this.id)"> Select<br/>Source</button></a>
</div>
<div id="sourcePopover" class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 remove-grid-padding margin-2px" >
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 padding-2px" >
<button class="btn btn-secondary btn-popup-sources center-block" id="source_btn_disc" >
<img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
<span class="popup-source-text"> Disc </span>
</button>
<button class="btn btn-secondary btn-popup-sources center-block" id="source_btn_BT">
<img src="images/BT.png" class="img-responsive popup-source-image" > <br/>
<span class="popup-source-text"> Bluetooth </span>
</button>
</div>
</div>
</div>
</body>
</html>
请给我提示或参考。
【问题讨论】：
标签： javascript android html jquery-ui drag-and-drop