堆栈内存溢出
  简体   繁体   English

使用jquery-ui拖放不起作用

[英]Drag and Drop not working using jquery-ui

 原文  2016-10-13 09:12:52  9   4    javascript/ android/ html/ jquery-ui/ drag-and-drop

问题描述

Hi I am creating one html page in which I am dragging some buttons in one Div using jQuery-ui and jquery-ui-punch. 嗨我正在创建一个html页面，其中我使用jQuery-ui和jquery-ui-punch在一个Div拖动一些buttons 。 But dragging and dropping not happening . 但拖拉不发生。

I don't understand why it's not working. 我不明白为什么它不起作用。 sourcePopover is popover which having buttons which I want to drag in fav_id . sourcePopover是popover，其中包含我想在fav_id拖动的fav_id 。

Here is my HTML/JavaScript code. 这是我的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>

Please give me hint or reference. 请给我提示或参考。

4 个解决方案

解决方案1
 2 已采纳  2016-10-16 09:36:41

@pritishvaidya has answered that you should add attribute cancel:false in draggable, that is absolutely correct. @pritishvaidya已回答你应该在draggable中添加属性cancel:false ，这是绝对正确的。

Apart from this I have changed some code that was not working. 除此之外，我更改了一些无效的代码。 Changes I have done listed below. 我在下面列出的变更。

1. 1。

In stop function inside draggable you are trying to get image name but It is not working. 在draggable中的stop函数中，你试图获取图像名称，但它不起作用。 This is also preventing from drag and drop. 这也防止了拖放。

2. 2。

You were trying to check whether image has been dropped or not by calling drop function and passing ui.helper.data("draggable") but I have changed it to 您试图通过调用drop函数并传递ui.helper.data（“draggable”）来检查图像是否已被删除但我已将其更改为
ui.helper.data("ui-draggable"). ui.helper.data（ “UI-可拖动”）。 This change may not be necessary because it is depend on your jquery-ui version. 此更改可能不是必需的，因为它取决于您的jquery-ui版本。

Click Run code snippet below to find your drag and drop working. 点击下面的运行代码段，找到您的拖放工作。

Edit: 编辑：

You have to bind draggable when popover is shown every time So you can use shown.bs.popover event of popover. 每次弹出窗口时都必须绑定draggable所以你可以使用shown.bs.popover事件。 I am also hiding popover when button is droped. 当按钮下垂时，我也隐藏了弹出窗口。 Please take a look on updated code 请查看更新的代码 

 $(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>

解决方案2
 1  2016-10-15 12:06:27

Buttons can be made to be draggable and droppable adding a simple functionality to the draggable class as shown. Buttons可以设置为可拖动和可 拖放 ，为可 拖动类添加简单功能，如图所示。

By using cancel:false 使用cancel:false

So your function will look like this after the implementation - 所以你的功能在实施后会如下所示 - 

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

Here is the documentation to the cancel event since it doesnt trigger the first click event 以下是取消事件的文档 ，因为它不会触发第一次单击事件

Here is the code i am using without any bootstrap so i have omitted the classes as per your coding style shown above. 这是我在没有任何引导程序的情况下使用的代码，因此我按照上面显示的编码样式省略了这些类。 

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

Another error in your code was that you are not specifying what does this snippet does which will throw an undefined error therefore it is not required .You can still use it by changing the src attribute with your required type. 您的代码中的另一个错误是您没有指定此代码段会导致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.");
                } */

This code is used to track the image dropped from the div and not used for the button. 此代码用于跟踪从div中删除的图像，而不用于按钮。

Screenshots for the working code can be seen here - 可以在这里看到工作代码的屏幕截图 -

IMG2 IMG1

解决方案3
 0  2016-10-13 09:17:06

for touch event in mobile using jquery you have to include below like file 对于使用jquery的移动设备中的触摸事件，您必须包含下面的文件 

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

you can get this file from here : https://github.com/furf/jquery-ui-touch-punch 你可以从这里得到这个文件： https ： //github.com/furf/jquery-ui-touch-punch

make sure to include this after jquery-ui.min.js file 确保在jquery-ui.min.js文件之后包含它

解决方案4
 -1  2016-10-16 10:35:23

You are trying to drag your button then you have to prevent button default behavior. 您正在尝试拖动按钮，然后必须阻止按钮默认行为。 like: button, select tag etc has default behavior, when you try to do something with click or touch it will fire that default event. 喜欢：按钮，选择标签等具有默认行为，当您尝试通过单击或触摸执行某些操作时，它将触发该默认事件。 So you just have to prevent that default event by using cancel: false on draggable() see more about cancel 因此，您只需要在draggable()上使用cancel: false来防止该默认事件，请参阅有关取消的更多信息

And here working link https://jsfiddle.net/L3j9qy4h/1/ with your code just after useing cancel: false . 在这里工作链接https://jsfiddle.net/L3j9qy4h/1/与你的代码使用后cancel: false 。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery-UI：即使鼠标在放置区域内，拖放有时也不起作用 - jQuery-UI: Drag and Drop sometimes not working eventhough mouse is inside drop area jquery-ui：使用可堆叠项目删除和拖动库存 - jquery-ui : drop&drag inventory with stackable items 在jQuery-ui droppable中检测不可接受的拖放 - Detect unacceptable drag drop in jQuery-ui droppable 如何使用jquery和jquery-ui克隆拖动事件 - how to clone the drag-event using jquery and jquery-ui 使用 jquery ui 嵌套拖放无法正常工作 - Nested Drag and Drop using jquery ui not working properly 带有可排序 UI 的 jQuery 拖放不起作用 - jQuery Drag and Drop with sortable UI not working jQuery UI拖放在IE9中不起作用 - Jquery UI Drag and Drop not working in IE9 如何使用可排序的jquery-ui功能同时对两个表中的行进行拖放排序？ - How use sortable jquery-ui feature to sort by drag and drop rows from two tables in the same time? jQuery-ui拖放。 删除的列表包含无法编辑的动态创建的文本框 - Jquery-ui Drag and drop. Dropped list contain Dynamically created text box which is not able to edit 如何通过两个包含相同ID元素的div使用jQuery-UI拖放 - How to use jQuery-UI drag and drop with two divs containing elements of identical ids
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM