jQuery用户界面触摸穿孔可拖动（）

在我的应用程序中，我也希望在移动设备上实现拖放。我正在考虑像这样使用JQuery Ui touch punch：

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

问题是，我的图像仅在其父图像的范围内拖动（请参见附件图像），而不是在整个页面上拖动。我尝试过改变遏制方案，但问题似乎出在别处。

CSS:

Javascript:

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

---

使用

draggable（）

上的

helper:clone

属性，以便图像在拖动时“脱离”其容器

---

请参见此处的官方jQuery UI可拖动文档：

您还可以添加自定义帮助程序

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

---

其中outerement是包含可拖动和拖放元素的元素

HTML，CSS关于图像、其父对象和页面的内容？

.dhThumbOuter{position:relative；}

看到了吗？这是你形象的自然容器

position:absolute

元素符合其

位置：relative

parents删除该属性无助于您提供的内容？问题在于溢出属性。我尝试在JSFIDLE中复制您的情况：（我对可拖动元素使用p标记而不是img标记）。尝试拖动不同的元素以查看不同的行为，无论是否使用

clone

helper。问题出在溢出属性中。我正在寻找解决方案，如何将可拖动对象返回到其原始位置，并遇到示例$（yourobject）。可拖动（{revert:“invalid”}）；所以谢谢你的朋友，你帮助了我！现在，我的可拖动对象在未放置时自动返回其原始位置！竖起大拇指！非常感谢。

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