3
こんにちは私はbuttonsを1つのDivにドラッグしているhtmlページをjQuery-uiとjquery-ui-punchを使って作成しています。しかし、ドラッグアンドドロップは起こらない。jquery-uiを使用してドラッグ＆ドロップが動作しない
なぜ動作しないのかわかりません。 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>
私にヒントまたは参考にしてください。ファイルのような
あなたは以下の含める必要が携帯使用jqueryのタッチイベントの
はい、それはポップアップではうまくいきません。私は 'sourcePopover'を開くソースボタンを選択しています。だから 'sourcePopover'から' fav_div'のimg/buttonをドラッグする必要があります –
@SandipArmalPatil、私は自分の答えを更新しました。アップデートを見て、コードスニペットを実行してください。 –
あなたのクイックレスポンスに感謝します:-)今のところアップ投票の答えです。しかし、奇妙なここではまだ働いていない。例えば、スクロールが進行中で中断することができないなど、cancelable = falseのタッチスタートイベントを取り消そうとする試みは無視されます。 –