jQuery UI Touch Punch draggable()

Question

내 응용 프로그램에서는 모바일 장치에 구현하려는 drag를 & 드롭으로 사용합니다. 나는 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; 
}​ 

자바 스크립트 :

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

Answer 2

또한 사용자 지정 도우미 outerElement이 드래그를 포함하는 요소가

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

를 추가 할뿐만 아니라