jQuery UI Touch Punch draggable（）

Question

在我的应用程序中，我使用drag＆amp; drop，我想在移动设备上实现。我正在考虑使用这样的JQuery Ui触控器：

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

问题是我的图像仅在其父图像的范围内拖动（请参阅附图）而不是整个页面。我试过改变收容选项，但问题似乎在其他地方。

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

Answer 1

使用helper: clone上的draggable()属性，以便在拖动时图片“突破”其容器。

请在此处查看官方jQuery UI可拖动文档：http://api.jqueryui.com/draggable/#option-helper

Answer 2

您还可以添加自定义助手

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

其中outerElement是包含draggable和drop元素的元素