jQuery UI Touch Punch draggable()

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

자바 스크립트 :

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

'.dhThumbOuter {위치 : 상대적;}'이거 봐? 그것은 이미지의 자연스러운 컨테이너입니다. 'postion : 절대적 '요소가'위치 : 상대적'부모를 따름 – kidwon

해당 속성을 제거해도 도움이되지 않습니다. – Jacob

이 draggable()에 helper: clone 속성을 사용 그래서 이미지가 드래그 때 컨테이너의 "돌발"고.

여기 공식 jQuery를 UI 드래그 문서를 참조하십시오 : http://api.jqueryui.com/draggable/#option-helper

출처

2013-03-11 14:39:19

슬프게도 이것은 도움이되지 않습니다 ... – Jacob

jsfiddle에서 상황을 재현하려고했습니다 : http://jsfiddle.net/QAKeR/ (draggable 요소에 img 태그 대신 p 태그 사용). 다른 요소를 드래그하여 'clone'헬퍼를 사용하거나 사용하지 않고 다른 동작을 봅니다. –

오버 플로우 특성에 문제가 있습니다. – Jacob

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

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

를 추가 할뿐만 아니라

출처

2016-05-24 18:00:07 lacexd

jQuery UI Touch Punch draggable()

답변

관련 문제