jQuery UI의 드래그 가능한 기능을 사용하여 부모를 드래그하여 아이를 이동하려면 어떻게해야합니까?

Question

jQueryUI의 드래그 가능한 플러그인을 사용하여, 클릭 및 드래그 이벤트가 자식에서 시작되었는지 여부에 관계없이 부모 컨테이너의 모든 드래그 이벤트를 특정 단일 자식으로 이동하려고합니다. http://jsfiddle.net/9rqHe/

HTML :

<div id="parent"> 
    <div id="child">Child</div> 
</div> 

CSS :

#parent { 
    width: 100%; 
    height: 400px; 
    border: 1px solid red; 
    overflow: hidden; 
} 

#child { 
    width: 50%; 
    height: 50%; 
    background-color: green; 
    cursor: move; 
} 

JS :

이 간단한 예를 살펴

$(document).ready(function() { 
    $('#child').draggable(); 
}); 

부모에게 드래그 가능한 조치를 위임하여 하위 이동을 허용 할 수 있습니까? mousedown 지정된 요소 (들)에 발생하지 않는 한

지정한 경우

이 시작 드래그 제한합니다

handle 옵션은이 중요한주의 아니었다면 그것이 작동하는 것처럼 보인다. 의 하위 요소 만 드래그 가능 요소가 허용됩니다. API documentation의 다른

것도이 내가 완전히 누락하지 않는 한 밖으로의 상자 수있는 뭔가를 가리 키도록 보인다.

Answer 1

기본 제공 방법이 없습니다. 여분의 div와 일부 jQuery 및 CSS를 사용하면 비슷한 효과를 얻을 수 있습니다.

jsFiddle example

HTML

<div id="parent"> 
    <div id="child">Child</div> 
    <div id="ghost"></div> 
</div> 

jQuery를

var childX = 0, 
    childY = 0; 
$('#ghost').draggable({ 
    drag: function (event, ui) { 
     $('#child').offset({ 
      top: childY + ui.offset.top, 
      left: childX + ui.offset.left 
     }); 
    }, 
    stop: function (event, ui) { 
     $(this).offset({ 
      top: 0, 
      left: 0 
     }); 
     childX = $('#child').offset().left; 
     childY = $('#child').offset().top; 
    } 
}) 

CSS

#parent { 
    width: 100%; 
    height: 400px; 
    border: 1px solid red; 
    overflow: hidden; 
    position:relative; 
} 
#child { 
    width: 50%; 
    height: 50%; 
    background-color: green; 
    cursor: move; 
    position:relative; 
    z-index:1; 
    pointer-events:none; 
} 
#ghost { 
    height:100%; 
    width:100%; 
    position:absolute; 
    top:0; 
} 

Answer 2

triggering the drag event이 더 이상 작동하지 않기 때문에 더러워졌습니다.

JSFiddle

는 기본적으로 나는 #child DIV에 자식 요소를 넣어 항상 #parent 사업부 위에 올려 놓으 JQuery와 이벤트 기능을 사용하십시오.

function updatehack(e,ui) 
{ 
    $('#hack').width($('#parent').width()); 
    $('#hack').height($('#parent').height()); 
    var p=$('#child').position(); 
    $('#hack').css('top',-p.top); 
    $('#hack').css('left',-p.left); 
} 


$('#child').draggable({ 
    stop:updatehack 
});