핸들러를 사용하여 jqueryui draggable 이미지 이동

Question

핸들러를 사용하여 드래그 가능한 이미지를 만들려면 어떻게해야합니까? 그 핸들러는 draggable 안에 있어야한다는 것을 알았지 만, 이미지 안에 또 다른 요소를 가질 수는 없습니다.

더 나은 프리젠 테이션을 위해 여기에 바이올린을 가지고 :

http://jsfiddle.net/index/bfpWv/10/

질문 내가 #viewport 내부에 끌어 여전히 #image를 이동 할 수 있어야한다 어떻게?

편집 나는 문제는 조금 막연한 생각 :

원인을 바로 지금 당신이 #image 제 드래그를 클릭하면, 그것은 #image 드래그 (바이올린에). 그러나 처음에 #viewport을 클릭하면 그렇지 않습니다. 그게 내가 원하는 일 이니까 #viewport을 클릭하고 드래그하면 여전히 #image을 드래그합니다.

Answer 1

jquery draggable은 핸들러가 draggable 안에 있어야합니다. 몇 줄의 코드로 드래그 할 수 있습니다.

<div id="container"> 
    <img id="image" src="http://thechive.files.wordpress.com/2011/03/hot-sexy-redheads-12.jpg" /> 
    <div id="viewport"></div> 
</div> 

JS : here

HTML 내 데모를 참조 답변

$(document).ready(function(){ 
    var isDragging, 
     top = 0, left = 0, 
     curX, curY; 

    $("#image").mousedown(function (e) { 
     e.preventDefault(); 
    }); 

    $("#container").mousedown(function (e) { 
     isDragging = true; 

     curX = e.pageX; 
     curY = e.pageY; 

     left = Number($("#image").css("margin-left"). 
         toString().replace("px", "")); 
     top = Number($("#image").css("margin-top"). 
        toString().replace("px", "")); 
    }); 

    $(document).mouseup(function() { 
     if (isDragging){ 
      // reset 
      isDragging = false; 
      top = 0; 
      left = 0; 
     } 
    }); 

    $("#container").mousemove(function(e){ 
     if (!isDragging) { 
      return; 
     } 

     left += e.pageX - curX; 
     top += e.pageY - curY; 

     // set the position 
     $("#image").css("margin-left", left + "px"). 
      css("margin-top", top + "px"); 

     curX = e.pageX; 
     curY = e.pageY; 
    }); 
}); 

Answer 2

fiddle 업데이트 됨. 여기에서 설명서를 읽어 보시기 바랍니다 : http://api.jqueryui.com/draggable/#option-containment

당신은 당신의 .draggable 방법에 격납 옵션을 사용했고, 당신은 또한 #viewport 안에 처음에 그것을 가지고 위해 #viewport 내부에 이미지를 넣어해야합니다. #viewport 외부에 보관하고 #viewport 안에 드래그하면 다시 외부로 끌 수 없습니다.

Answer 3

나는 #viewport 내부에 드래그 할 수 있어야하고, 여전히 이동해야합니다 방법 설명 을 고려하여 #image - 한 간단 Z- 인덱스의 CSS 스타일을 사용하여. 희망이 시간이 도움이됩니다. Fiddle