jQuery UI Touch Punch draggable（）

在我的应用程序中，我使用拖动&删除，我也希望在移动设备上执行该删除。我想使用jQuery UI的触摸冲床这样的：jQuery UI Touch Punch draggable（）

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

的问题是，我的图像拖仅在其父的范围（见附件图片）而不是整个页面上。我试过更换遏制选项，但问题似乎在其他地方。 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

来源

2013-03-11 Jacob

HTML，关于图像，它的父母和页面的CSS？ – kidwon 2013-03-11 14:41:30

'.dhThumbOuter {position：relative;}'看到了吗？这是你图像的自然容器。 '位置：绝对'元素符合他们的'位置：相对'父母 – kidwon 2013-03-11 14:46:53

删除该属性并没有帮助 – Jacob 2013-03-11 14:48:20

使用helper: clone财产上draggable()，使图像 “爆发” 拖时它的容器。

看到官方的jQuery UI的可拖动文件的位置：http://api.jqueryui.com/draggable/#option-helper

来源

2013-03-11 14:39:19

可悲的是这并没有帮助... – Jacob 2013-03-11 14:46:14

我试图在jsfiddle这里复制你的情况：http://jsfiddle.net/QAKeR/（我使用p标签而不是img标签作为可拖动元素）。尝试拖动不同的元素来查看不同的行为，无论是否使用'clone'助手。 – 2013-03-11 15:20:20

问题在于溢出属性。 – Jacob 2013-03-12 08:36:44

您还可以添加自定义的助手

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

其中outerElement是包含您可拖动的元素和删除元素以及

来源

2016-05-24 18:00:07 lacexd

jQuery UI Touch Punch draggable（）

回答

相关问题