jQuery UI 触摸打洞可拖动()

Question

在我的应用程序中，我使用拖放功能，我也想在移动设备上实现它。我正在考虑像这样使用 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

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

请参阅此处的官方 jQuery UI 可拖动文档:http://api.jqueryui.com/draggable/#option-helper