마우스가 mousedown에있을 때 마우스를 따라 div 만들기

div가있는 마우스 coursor를 따라 jquery 함수를 만들려고합니다. mousedown에있을 때 mouseup에있을 때 마지막에 머물러 있습니다. 그것이 있었던 위치.마우스가 mousedown에있을 때 마우스를 따라 div 만들기

어떤 sugestion.

출처

2014-02-14 user3308331

"mousedown에있을 때 마우스를 올리면 마지막 위치에 머물러 있습니다." 여기서 무엇을 의미하는지 명확히 할 수 있습니까? –

미안, 휴지통에 머물렀을 때 div가 생기고, 마우스를 올렸을 때 마지막 위치에 머물렀다. – user3308331

"머큐 타운에있을 때 div를 휴경"- 그래서 페이지의 div는 마우스 버튼을 누르면 마우스가 움직입니다. –

이유는 간단 JQuery와에 의해 드래그 앤 드롭을 사용하지 :

<script> 
$(function() { 
$("#draggable").draggable(); 
}); 
</script>

Jquery draggable

출처

2014-02-14 00:21:24

actully 내게 무엇이있다 내 선생님이 우리가 이런 식으로 이런 일을하기를 원하기 때문에 물걸레와 드롭을 할 수는 없다. 내 기능을 끝낼 수 없다. 초보자라면이게 도움이 될거야.

내가 함께 Draggable 객체를 정의하는 간단한 작업 예제를 넣었습니다. 끌기 항목 (움직이는 요소)과 끌기 경계 (항목을 안으로 이동하는 공간 또는 요소)를 지정합니다. 드래그 가능한 항목을 페이지의 특정 공간 (예 : 컨테이너)으로 제한하거나 수학 기반의 상대 좌표 시스템을 정의하려는 경우 경계 인의 개념이 중요합니다.

내 솔루션은 빠른 아니지만, 그것은 개념을 보여줍니다 우리가 세계에 mousedown 값을 유지하는 것이 우리의 요소 주위에 드래그 적합 할 때 우리가 결정할 수 있도록하는

$(function() { 

    window.mousedown = 0; 
    $(window).on('mousedown mouseup', function(e) { 
     if(e.type == 'mousedown') { this.mousedown++; } 
     else { this.mousedown--; } 
    }); 

    var Draggable = function(dragItem, dragBoundary) { 
     this.item = $(dragItem).css('position', 'absolute'); 
     this.item.on('mousemove', $.proxy(this.handleDragEvent, this)); 
     this.boundary = $(dragBoundary).css('position', 'relative'); 
    }; 

    Draggable.prototype.handleDragEvent = function(e) { 
     if(window.mousedown) { 

      var mousePosition = this.mapToBoundary([e.clientX, e.clientY]); 
      var mouseX = mousePosition[0], 
       mouseY = mousePosition[1]; 

      if(typeof this.prevMouseX == "undefined") this.prevMouseX = mouseX; 
      if(typeof this.prevMouseY == "undefined") this.prevMouseY = mouseY; 

      this.itemX = this.item.offset().left - this.boundary.offset().left; 
      this.itemY = this.item.offset().top - this.boundary.offset().top; 

      var deltaX = mouseX - this.prevMouseX, 
       deltaY = mouseY - this.prevMouseY; 

      this.item.css({ 
       'left': this.itemX + deltaX, 
       'top': this.itemY + deltaY 
      }); 

      this.prevMouseX = mouseX; 
      this.prevMouseY = mouseY; 

     } 
    }; 

    Draggable.prototype.mapToBoundary = function(coord) { 
     var x = coord[0] - this.boundary.offset().left; 
     var y = coord[1] - this.boundary.offset().top; 
     return [x,y]; 
    }; 

    var draggable = new Draggable($('.draggable'), $('.container')); 

});

공지 사항 (끌기 항목 자체에 mousemove 청취자 만 추가). 또한 div 경계 위로 div 위의 스페이서를 포함하여 페이지 주위 어디에서나 경계를 이동할 수 있고 좌표계가 정확하다는 것을 보여줍니다. 실제로 코드를에 할당 된 경계 내에서 드래그 가능한 항목으로 제한하는 것은 간단한 수학을 사용하여 작성할 수 있습니다. 여기

는 바이올린입니다 : http://jsfiddle.net/bTh9s/3/

편집 : 여기

은 컨테이너 내에서 드래그 가능한 항목을 제한하는 몇 가지 코드의 시작이다.

Draggable.prototype.restrictItemToBoundary = function() { 

    var position = this.item.position(); 
     position.right = position.left + this.item.outerWidth(); 
     position.bottom = position.top + this.item.outerHeight(); 

    if(position.left <= 0) { 
     this.item.css('left', 1); 
    } else if(position.right >= this.boundary.outerWidth()) { 
     this.item.css('left', this.boundary.outerWidth() - this.item.outerWidth()); 
    } 

    if(position.top <= 0) { 
     this.item.css('top', 1); 
    } else if(position.bottom >= this.boundary.outerHeight()) { 
     this.item.css('top', this.boundary.outerHeight() - this.item.outerHeight()); 
    } 

};

이 메서드는 끌기 항목의 CSS 위치를 업데이트 한 직후에 Draggable.handleDragEvent 내부에서 호출해야합니다. 이 솔루션은 문제가있는 것 같지만 시작일뿐입니다.

출처

2014-02-14 02:04:27

마우스가 mousedown에있을 때 마우스를 따라 div 만들기

답변

관련 문제