jQuery UI Touch Punch draggable()

Question

In my application I use drag&drop which I aslo want to implement on mobile devices. I was thinking about using JQuery Ui touch punch like this:

  var thumb = document.createElement("img");
  $(thumb).draggable({containment: "html"});

The problem is that my image is dragged only in the scope of its parent (see attached image) not on the whole page. I've tried changing containment options but the problem seems to be elsewhere. enter image description here

CSS:

html, body { 
   height: 100%;
   background: black;
   margin:0; padding:0;
   overflow:hidden;
}
//one parent
.dhThumbOuter {
    float: left;
    width: 64px;
    height: 64px;
    -webkit-box-shadow: 0px 0px 5px #4d4d4d;
    -moz-box-shadow: 0px 0px 5px #4d4d4d;
    box-shadow: 0px 0px 5px #4d4d4d;
    border:solid gray 1px;
    overflow: hidden;
    padding: 3px;
    margin-left: 3px;
    font-size: smaller;
    position:relative;
    border : solid gray 2px;

}
//other parrent
.dhThumbImage {
    background: lightgray;
    padding: 0;
    width: 64px;
    height: 64px;
    overflow: hidden;
    position:absolute;
}

Javascript:

   var thout = createElement("div", "dhThumbOuter dhRounded");
            container.appendChild(thout);
            var thinner = createElement("div", "dhThumbImage dhRounded");
            thout.appendChild(thinner);
            thinner.appendChild(thumb); //my image

`.dhThumbOuter{position:relative;}` see that? That's the natural container of your image. `postion:absolute` elements comply to their `position:relative` parents — kidwon, Mar 11 '13 at 14:46

score 1 · Answer 1 · answered Mar 11 '13 at 14:39

1

Use the helper: clone property on draggable() so that the image "breaks out" of it's container when dragged.

See the official jQuery UI draggable docs here: http://api.jqueryui.com/draggable/#option-helper

answered Mar 11 '13 at 14:39

Alistair Findlay

1,154
6
12

I've tried to replicate your situation in jsfiddle here: http://jsfiddle.net/QAKeR/ (I'm using p tags instead of img tags for the draggable element). Try dragging the different elements to see the different behaviour, with and without the `clone` helper. – Alistair Findlay Mar 11 '13 at 15:20
The issue was in the overflow porperties. – Jacob Mar 12 '13 at 08:36
I was looking for the solution how the draggable objects to return to its original position and came across your example $(yourobject).draggable({ revert: "invalid" }); So thank you friend that you helped me! Now my draggable objects return automatically to its original positions when not dropped! Thumbs up! Thank you! – Combine Oct 18 '17 at 08:32

score 0 · Answer 2 · answered May 24 '16 at 18:00

You can also add custom helper

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: function(){
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  },
})

where outerElement is the element which contains your draggable and drop element as well

jQuery UI Touch Punch draggable()

2 Answers2