내 jQuery 스크립트가 이미지와 함께 작동하지 않지만 다른 모든 요소와 함께 작동

문서 위로 요소를 드래그하도록 jQuery 스크립트를 만들었습니다. 나는 대본을 작성했으며 완벽하게 작업 중이다. 그러나 이미지를 추가하면 스크립트가 실패합니다. 왜 문서 위에 이미지를 드래그 할 수 없는지, div, span 등과 같은 다른 요소를 드래그 할 수 있습니다. 내가내 jQuery 스크립트가 이미지와 함께 작동하지 않지만 다른 모든 요소와 함께 작동

내 코드는 완벽하게

초 olario.com/jquery/second.php 작업

<script language="javascript" src="jquery-1.4.2.min.js"></script> 
<script language="javascript"> 
    var x1 = y1 = 0; 
    var drag = false; 
    $(document).ready(function(e){ 
    $('#dv').mousedown(function(e){ 
     x1 = e.pageX - parseInt($('#dv').css('left')); 
     y1 = e.pageY - parseInt($('#dv').css('top')); 
     drag = true; 
    }) 
    $(document).mouseup(function(e){ drag = false; }) 
    $(document).mousemove(function(e){ 
     if(!drag) return 
     $('#dv').css('left',eval(e.pageX - x1)+'px') 
     $('#dv').css('top',eval(e.pageY - y1)+'px') 
    }) 
    }); 
</script>

이 olario.com/jquery/first.php (텍스트 일반 DIV)을 확인하시기 바랍니다 다음이 목적을 위해 jQuery를 UI를 사용하는 관심이없는 나는, 그 작동하지 않습니다 이미지

나는이 포럼이 나에게보다

도움이 될 것입니다 희망,이 문제를 해결하기 위해 두 주 동안

$('#dv').mousedown(function(e){ 

    e.preventDefault(); 

    x1 = e.pageX - parseInt($('#dv').css('left')); 
    y1 = e.pageY - parseInt($('#dv').css('top')); 
    drag = true; 

});

preventDefault() 호출이 기본적으로 이미지 자체를 이동하려고에서 브라우저를 중지하고 스크립트가 걸릴 수 있습니다 : KS 사전에 많은

출처

2010-08-03 john

이상한, 두 예제는 크롬에 매우 잘 작동합니다.합니다 (IMG가 onMouseUp에 정지하지 않지만) – tcooc

나뿐만 아니라 크롬에 그것을 시도하고 내가 가진 유일한 문제는 브라우저가 I로 이미지를 선택하려고로했다 그것을 끌었다. 어쩌면 div를 드래그 할 수있게 만들고 이미지를 배경으로 적용 할 수 있을까요? – CEich

제쳐두고, 더 많은 기능을 원할 경우이 스크립트가 있습니다. [jQuery UI Draggable] (http://jqueryui.com/demos/draggable/). 나는 이것을 위해 다른 도서관을 포함하는 것을지지하지 않지만, 당신이 따라 다니는 다른 * 특징들을 제공한다면, 그것을 고려하고 싶을지도 모른다. –

당신은 당신의 mousedown 이벤트 핸들러의 작은 팅겨 작업을 얻을 수 있습니다 위에. 편집

가 IE에서이 작업을 얻으려면, 당신은 또한에서 preventDefault를 추가해야합니다() 당신의 MouseMove 이벤트 핸들러를 호출

$(document).mousemove(function(e){ if(!drag) return; e.preventDefault(); $('#dv').css('left',eval(e.pageX - x1)+'px') $('#dv').css('top',eval(e.pageY - y1)+'px') })

출처

2010-08-03 14:56:20 Pat

e.preventDefault(); IE에서 작동하지 않습니다. 해결책이 있습니까? – john

물론 수정 사항을 확인하기 위해 수정 사항을 확인하십시오. – Pat

애완 동물, 고마워요, 고마워요, 2 주 동안 이걸 얻으려고 했어요 :) 다시 :) :) – john

은 IDS를 통해 클래스 이름을 사용해보십시오.

대상 요소에 대해 10 개의 mousedown을 사용하면 마우스 업 때 리스너를 절대 제거하지 않기 때문에 드래그 할 때 모두 20 개의 리스너가 실행됩니다.

출처

2010-08-03 14:59:46 BGerrissen

이것은 잘못된 것입니다, 마우스 처리기가 document.ready에 첨부되어 있습니다. ','mousedown' 핸들러가 아니라 코드/괄호를 닫으십시오. 더 명확하게하기 위해 포맷 할 것입니다. –

내 appologies가 고쳐졌습니다.) CSS 표현식에 classnames 대신 id를 사용하면 드래그 스크립트가 하나의 단일 엔티티로 제한됩니다. Afaik, jQuery는 표준에 따라 ID가 X 인 마지막으로 찾은 요소 만 반환합니다. 클래스 이름을 사용하면보다 일반적이고 예측 가능합니다. – BGerrissen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery Drag and drop</title> 
<style type="text/css"> 
#dv { 
      position: absolute; 
      cursor: move; 
      } 
</style> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script> 


<script language="javascript"> 
var x1 = y1 = 0; 
var drag = false; 
$(document).ready(function(e){ 

    //this is a possible solution 
    jQuery('#dv>img').disableSelection(); 

    $('#dv').mousedown(function(e){ 

     x1 = e.pageX - parseInt($('#dv').css('left')); 
     y1 = e.pageY - parseInt($('#dv').css('top')); 
     drag = true; 

    }) 

    $(document).mouseup(function(e){ drag = false; }) 

    $(document).mousemove(function(e){ 

     if(!drag) return 
     $('#dv').css('left',eval(e.pageX - x1)+'px') 
     $('#dv').css('top',eval(e.pageY - y1)+'px') 

    }) 
}); 
</script> 
</head> 
<body> 

<div id="dv" style="position:absolute;left:300px;top:200px;"> 
    <img src="http://olario.com/jquery/drupal.png" /> 
</div> 


</div> 
</body> 
</html>

출처

2010-08-03 15:41:47

이 스크립트는 이미지로 작동하지 않습니다. – john

작동합니다. 전송하기 전에 시도했습니다. –

내 jQuery 스크립트가 이미지와 함께 작동하지 않지만 다른 모든 요소와 함께 작동

답변

관련 문제