CODEWITHSUNDEEP
jquerytouchjquery-ui-touch-punch
Jacob
Jacob

Reputation: 4031

jQuery UI Touch Punch draggable()

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

Upvotes: 2

Views: 4117

Answers (2)

n4gys4nyi
n4gys4nyi

Reputation: 933

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

Upvotes: 0

Alistair Findlay
Alistair Findlay

Reputation: 1154

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

Upvotes: 1

Related Questions