您好，我正在创建一个 html 页面，其中我使用 jQuery-ui 和 jquery-ui-punch 将一些 button 拖到一个 Div 中。但是拖放不会发生。
我不明白为什么它不起作用。 sourcePopover 是一个 popover，它有我想在 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>
请给我提示或引用。
最佳答案
@pritishvaidya 回答说你应该在 draggable 中添加属性 cancel:false，这是绝对正确的。
除此之外，我还更改了一些不起作用的代码。下面列出了我所做的更改。
1.
在 draggable 内的 stop 函数中，您试图获取图像名称，但它不起作用。这也防止了拖放。
2.
您试图通过调用 drop 函数并传递 ui.helper.data("draggable") 来检查图像是否已被删除，但我已将其更改为
ui.helper.data("ui-draggable").此更改可能不是必需的，因为它取决于您的 jquery-ui 版本。
单击下面的“运行代码 fragment ”以发现您的拖放工作正常。
编辑:
你必须在每次显示popover时绑定(bind)draggable 所以你可以使用popover的shown.bs.popover事件。当按钮被放下时，我也隐藏了弹出窗口。请查看更新后的代码
$(function(){
$("#btn_select_source").popover({
container: 'body',
animation:true,
html : true,
content: function() {
return $("#sourcePopover").html();
},
title: function() {
return $("#sourcePopoverTitle").html();
}
});
$('#btn_select_source').on('shown.bs.popover', function () {
makeButtonDraggable();
});
});
function init(){}
function buttonSourcePressed(c){}
function makeButtonDraggable(){
$(".popover-content button").draggable({
cancel :false,
revert: "invalid",
refreshPositions: true,
drag: function (event, ui) {
ui.helper.addClass("draggable");
},
stop: function (event, ui) {
ui.helper.removeClass("draggable");
var image = $(this).find('img').attr('src').split("/")[$(this).find('img').attr('src').split("/").length - 1];
if ($.ui.ddmanager.drop(ui.helper.data("ui-draggable"), event)) {
alert(image + " dropped.");
$("#btn_select_source").popover('hide')
}
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);
}
});
}.draggable{
filter: alpha(opacity=60);
opacity: 0.6;
}
.dropped{
position: static !important;
}<!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="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
</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" style="border:1px solid blue;">
<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 ">
<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>
</body>关于javascript - 使用 jquery-ui 拖放不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40016807/