div에서 드래그 가능한 이미지를 만드는 방법은 무엇입니까?

페이스 북 표지처럼 div에서 이미지를 이동하려고하는데 이미지 태그 을 사용하면 원활하게 움직이지 않습니다. 나는 배경 이미지처럼 사업부에서이 이미지를 넣을 때 ..div에서 드래그 가능한 이미지를 만드는 방법은 무엇입니까?

<body onload="init();"> 
    <div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px"> 
     <img src="Desert.jpg" id="ele" style="position:absolute;"></img> 
    </div> 
</body>

이 코드를 내 JS 코드가 ..

var draggable = function(element) { 
    element.addEventListener('mousedown', function(e) { 
     e.stopPropagation(); 
     if (e.target != element) 
      return; 
     var offsetX = e.pageX - element.offsetLeft; 
     var offsetY = e.pageY - element.offsetTop; 
     function move(e) { 
      var ele = document.getElementById('ele'); 
      var width = 400-ele.clientWidth; 
      var height = 400-ele.clientHeight; 
      element.style.left = (e.pageX - offsetX) + 'px'; 
      element.style.top = (e.pageY - offsetY) + 'px'; 
     } 
     function stop(e) { 
      document.removeEventListener('mousemove', move); 
      document.removeEventListener('mouseup', stop); 
     } 
     document.addEventListener('mousemove', move); 
     document.addEventListener('mouseup', stop); 
    }); 
} 

function init() { 
    var ele = document.getElementById('ele'); 
    draggable(ele); 
}

를 작동하고 작동하지 않는 내 HTML 코드입니다 작동 중입니다.

<body onload="init();"> 
    <div id="testdiv" style="position:relative;left:100px;overflow:hidden;border:1px solid #ccc;width:400px;height:400px"> 
     <div id="ele" style="width:100%; height:100%; background-color: gray; position:absolute; background-image:url('Desert.jpg');"></div> 
    </div> 
</body>

출처

2014-07-25 Anonymous

div 안에 이미지를 정렬하는 해결책을 찾고 계십니까? JSFiddle을 제공해 주시겠습니까? – ProDexorite

http://jsfiddle.net/sD92R/ –

코드에서'init();'함수를 제거하면''이 작동합니다. http://jsfiddle.net/sD92R/4/ -하지만 네가 원하는게 아닌 것 같니? – morkro

-1

<img>은 자체 마감 태그입니다. 유효하지 않으므로 </img>이 필요하지 않습니다. 그것을 제거하고 잘 작동합니다. 당신의 doctype 사용한다에 따라 :

HTML5 것은

<img src="Desert.jpg" id="ele" style="position:absolute;">

XHTML은(태그의 끝에 /주의)

<img src="Desert.jpg" id="ele" style="position:absolute;" />

출처

2014-07-25 08:26:35 morkro

좋아,하지만 여전히 원활하게 움직이지 않는 이미지 –

이것은 답변이 아닙니다 ... 모든 추천이나 조언은 코멘트에 게시되어야합니다 – ByronMcGrath

당신이 참조 할 수 질문. 이미지를 드래그하는 것과 동일한 아이디어를 처리하지만 질문은 약간 다릅니다. 질문에서 JSFiddle을 확인하십시오.

Check it out here!

출처

2014-07-25 08:36:43 ProDexorite

이미지 태그에이 문제가 발생합니다. –

div 태그가 아님 –

div에서 드래그 가능한 이미지를 만드는 방법은 무엇입니까?

답변

관련 문제