Question

您好我正在创建一个html页面，其中我使用jQuery-ui和jquery-ui-punch在一个buttons中拖动一些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>

请给我提示或参考。

Answer 1

@pritishvaidya已回答您应该在draggable中添加属性cancel:false，这绝对是正确的。

除此之外，我更改了一些无效的代码。我在下面列出的更改。

1

在可拖动的stop函数中，您正在尝试获取图像名称，但它无法正常工作。这也可以防止拖放。

2

您试图通过调用drop函数并传递ui.helper.data（＆＃34; draggable＆＃34;）来检查图像是否已被删除，但我已将其更改为
ui.helper.data（＆＃34; UI-拖动＆＃34）。此更改可能不是必需的，因为它取决于您的jquery-ui版本。

点击下面的运行代码段，找到您的拖放工作。

编辑：

每次弹出窗口时都必须绑定draggable所以你可以使用shown.bs.popover popover事件。当按钮下垂时，我也隐藏了弹出窗口。请查看更新的代码

＆＃13;

$(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);
   }
 });
}

＆＃13;

.draggable{
  filter: alpha(opacity=60);
  opacity: 0.6;
}
.dropped{
  position: static !important;
}

＆＃13;

<!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>

＆＃13;

Answer 2

Buttons可以可拖动和可放置向可拖动类添加简单功能，如图所示。

使用cancel:false

所以你的功能在实现后会是这样的 -

$(function () {
    $("#dvSource button").draggable({
        cancel :false,
        revert: "invalid",
        refreshPositions: true,
        drag: function (event, ui) {
            ui.helper.addClass("draggable");
        },

以下是取消事件的documentation，因为它不会触发第一次点击事件

这是我在没有任何引导程序的情况下使用的代码，所以我按照上面显示的编码样式省略了这些类。

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


</head>
<body>
<div>
<style type="text/css">
body
{
    font-family: Arial;
    font-size: 10pt;
}
img
{
    height: 100px;
    width: 100px;
    margin: 2px;
}
.draggable
{
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.dropped
{
    position: static !important;
}
#dvSource, #dvDest
{
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 100px;
    width: 430px;
}
</style>


<script type="text/javascript">
$(function () {
    $("#dvSource 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.src.split("/")[this.src.split("/").length - 1];*/
            /*if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
                alert(image + " dropped.");
            }
            else {
                alert(image + " not dropped.");
            }*/
        }
    });
    $("#dvDest").droppable({
        drop: function (event, ui) {
            if ($("#dvDest button").length == 0) {
                $("#dvDest").html("");
            }
            ui.draggable.addClass("dropped");
            $("#dvDest").append(ui.draggable);
        }
    });
});
</script>
<div id="dvSource">

<a data-toggle="popover"   id="a_select_source">

        <button type="button" class="btn btn-secondary" id="btn_select_source">Select<br/>Source</button>

        </a>

</div>
<hr />
<div id="dvDest" >
        <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_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_disc" >
            <img src="images/DISC.png" class="img-responsive popup-source-image" style="padding:5px" > <br/>
            <span class="popup-source-text"> Disc </span>
        </button>
    </div>
    </div>
    </body>
    </html>

您的代码中的另一个错误是您没有指定此代码段将执行哪些内容会导致undefined error因此不需要。您可以仍然可以通过更改所需类型的src属性来使用它。

/*  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.");
                } */

此代码用于跟踪从div中删除的图像，而不用于按钮。

可以在此处看到工作代码的屏幕截图 -

Answer 3

对于使用jquery的移动设备中的触摸事件，您必须包含以下文件

<script src="file:///android_asset/jquery/jquery.ui.touch-punch.min.js" type="text/javascript"></script>

您可以从此处获取此文件：https://github.com/furf/jquery-ui-touch-punch

确保在jquery-ui.min.js文件

之后加入此内容

Answer 4

您正在尝试拖动按钮，然后必须阻止按钮默认行为。喜欢：按钮，选择标签等具有默认行为，当您尝试通过单击或触摸执行某些操作时，它将触发该默认事件。因此，您必须在cancel: false上使用draggable()来阻止该默认事件，请参阅有关cancel

的更多信息

此处使用cancel: false后，您可以使用您的代码链接https://jsfiddle.net/L3j9qy4h/1/。

使用jquery-ui拖放不起作用

4 个答案: