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（）

回答

相關問題