Drag and Drop not working using jquery-ui

Question

Hi I am creating one html page in which I am dragging some buttons in one Divusing jQuery-ui and jquery-ui-punch. 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.

Here is my HTML/JavaScript code.

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

Kandarp Kalavadia · Accepted Answer · 2016-10-18T07:14:25.910

@pritishvaidya has answered that you should add attribute cancel:false in draggable, that is absolutely correct.

Apart from this I have changed some code that was not working. Changes I have done listed below.

1.

In stop function inside draggable you are trying to get image name but It is not working. This is also preventing from drag and drop.

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
ui.helper.data("ui-draggable"). This change may not be necessary because it is depend on your jquery-ui version.

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

Yes, But it's not working with popup.. I have Select source button which opening `sourcePopover`. So, from `sourcePopover` I need to drag img/button in `fav_div` — Sandip Armal Patil, Oct 18 '16 at 06:35
@SandipArmalPatil , I have updated my answer .Take a look on updates and run code snippet. — Kandarp Kalavadia, Oct 18 '16 at 07:15
Thank you for your quick response :-) For now up-voting answer . But strange It's still not working here. Now I am getting one warning `Ignored attempt to cancel a touchstart event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.` — Sandip Armal Patil, Oct 18 '16 at 07:31
It's working with browser but not on chrome when we open screen in mobile debug mode. So might be touch-punch not working here? — Sandip Armal Patil, Oct 18 '16 at 07:34
Take a look on this http://stackoverflow.com/questions/26478267/touch-move-getting-stuck-ignored-attempt-to-cancel-a-touchmove. This may help you. — Kandarp Kalavadia, Oct 18 '16 at 08:00

Pritish Vaidya · Answer 2 · 2016-10-16T12:19:49.557

Buttons can be made to be draggable and droppable adding a simple functionality to the draggable class as shown.

By using 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.

/*  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.

Screenshots for the working code can be seen here -

where is a fiddle? how do you support mobile device while excluding jquery.ui-touch-punch? — Sandip Armal Patil, Oct 15 '16 at 12:46
just add cancel:false on your above code and rest all remians the same,since the prblem is not with the jquery.ui-touch-punch but with the button draggable class as it slightly differently — Pritish Vaidya, Oct 15 '16 at 13:03

score 0 · Answer 3 · answered Oct 13 '16 at 09:17

0

for touch event in mobile using jquery you have to include below like file

<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

make sure to include this after jquery-ui.min.js file

answered Oct 13 '16 at 09:17

Rahul Khurana

8,577
7
33
60

you are applying it to a div try applying this into any item inside the div. – Rahul Khurana Oct 15 '16 at 08:37

score -1 · Answer 4 · answered Oct 16 '16 at 10:35

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

And here working link https://jsfiddle.net/L3j9qy4h/1/ with your code just after useing cancel: false .

Drag and Drop not working using jquery-ui

4 Answers4