이동 / 드래그 가능
이것은 내 업데이트 및 수정 된 스크립트입니다. 완전히 작동합니다.하지만 범용화하고 싶지는 않습니다. **** 어떻게 만들 수 있는지 관찰 function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);하여 드래그 가능한 기능을 사용해야 할 때마다 할 필요가 없습니다. 다른 요소에 대해?
window.onload = addListeners;
var BOX = function(){
return{
Draggable: function(){}
};
}();
function addListeners(){
document.getElementById('div').addEventListener('contextmenu', menumove, false);
**document.getElementById('div').addEventListener('mousedown', function(e){BOX.Draggable.elemen = e.target || e.srcElement; elementDraggable(e);}, false);**
}
function elementDraggable(e){
var e = e || window.event;
var div = BOX.Draggable.elemen;
BOX.Draggable.innerX = e.clientX + window.pageXOffset - div.offsetLeft;
BOX.Draggable.innerY = e.clientY + window.pageYOffset - div.offsetTop;
window.addEventListener('mousemove', elementMove, false);
window.addEventListener('mouseup', function(){
window.removeEventListener('mousemove', elementMove, false);
}, true);
function elementMove(e){
div.style.position = 'absolute';
div.style.left = e.clientX + window.pageXOffset - BOX.Draggable.innerX + 'px';
div.style.top = e.clientY + window.pageYOffset - BOX.Draggable.innerY + 'px';
}
}
jQuery가 당신을위한 옵션입니까? 코드가 이미 존재하기 때문에 수행하는 작업을 정말 간단하게 만듭니다.
http://jqueryui.com/demos/draggable/
자바 스크립트 코드
window.onload = addListeners;
function addListeners(){
document.getElementById('dxy').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', divMove, true);
}
function divMove(e){
var div = document.getElementById('dxy');
div.style.position = 'absolute';
div.style.top = e.clientY + 'px';
div.style.left = e.clientX + 'px';
}
이것은 div를 드래그하는 멋진 no-jQuery 스크립트입니다 : http://jsfiddle.net/g6m5t8co/1/
<!doctype html>
<html>
<head>
<style>
#container {
position:absolute;
background-color: blue;
}
#elem{
position: absolute;
background-color: green;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
</style>
<script>
var mydragg = function(){
return {
move : function(divid,xpos,ypos){
divid.style.left = xpos + 'px';
divid.style.top = ypos + 'px';
},
startMoving : function(divid,container,evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
divTop = divid.style.top,
divLeft = divid.style.left,
eWi = parseInt(divid.style.width),
eHe = parseInt(divid.style.height),
cWi = parseInt(document.getElementById(container).style.width),
cHe = parseInt(document.getElementById(container).style.height);
document.getElementById(container).style.cursor='move';
divTop = divTop.replace('px','');
divLeft = divLeft.replace('px','');
var diffX = posX - divLeft,
diffY = posY - divTop;
document.onmousemove = function(evt){
evt = evt || window.event;
var posX = evt.clientX,
posY = evt.clientY,
aX = posX - diffX,
aY = posY - diffY;
if (aX < 0) aX = 0;
if (aY < 0) aY = 0;
if (aX + eWi > cWi) aX = cWi - eWi;
if (aY + eHe > cHe) aY = cHe -eHe;
mydragg.move(divid,aX,aY);
}
},
stopMoving : function(container){
var a = document.createElement('script');
document.getElementById(container).style.cursor='default';
document.onmousemove = function(){}
},
}
}();
</script>
</head>
<body>
<div id='container' style="width: 600px;height: 400px;top:50px;left:50px;">
<div id="elem" onmousedown='mydragg.startMoving(this,"container",event);' onmouseup='mydragg.stopMoving("container");' style="width: 200px;height: 100px;">
<div style='width:100%;height:100%;padding:10px'>
<select id=test>
<option value=1>first
<option value=2>second
</select>
<INPUT TYPE=text value="123">
</div>
</div>
</div>
</body>
</html>
음, 이동 코드는 다음과 같이 단순화됩니다.
div.style.position = "absolute";
div.style.top = e.clientY - (e.clientY - div.offsetTop) + "px";
div.style.left = e.clientX - (e.clientX - div.offsetLeft) + "px";
여기서 기본 수학- e.clientX그리고 e.clientY는 여기 위치에 전혀 영향을 미치지 offsetLeft않으므로을 가져 와서으로 재 할당 style.left하고 상단에 대해서도 동일합니다. 따라서 전혀 움직임이 없습니다.
당신이해야 할 일은를 저장 clientX하고 clientY언제 mousedown발생 하는지를 기반으로 뺄셈을하는 것입니다.
아 그리고 이벤트 리스너도 잘못 설정하고 있습니다. 지금의 방식은 divMove한 번 실행 하고 반환 값 ( undefined여기)은 리스너로 연결된 함수입니다. 대신 function(e) {divMove(dxy,e || window.event);}.
Shaedo의 코드를 약간 수정 하고 함수로 래핑하고 요소의 일부 또는 하위 항목 (예 : div의 제목 표시 줄)으로 요소를 드래그 할 수있는 기능을 추가했습니다. 이 데모에서는 빨간색 영역 만 드래그하여 파란색 영역을 이동할 수 있습니다.
function makeDragable(dragHandle, dragTarget) {
let dragObj = null; //object to be moved
let xOffset = 0; //used to prevent dragged object jumping to mouse location
let yOffset = 0;
document.querySelector(dragHandle).addEventListener("mousedown", startDrag, true);
document.querySelector(dragHandle).addEventListener("touchstart", startDrag, true);
/*sets offset parameters and starts listening for mouse-move*/
function startDrag(e) {
e.preventDefault();
e.stopPropagation();
dragObj = document.querySelector(dragTarget);
dragObj.style.position = "absolute";
let rect = dragObj.getBoundingClientRect();
if (e.type=="mousedown") {
xOffset = e.clientX - rect.left; //clientX and getBoundingClientRect() both use viewable area adjusted when scrolling aka 'viewport'
yOffset = e.clientY - rect.top;
window.addEventListener('mousemove', dragObject, true);
} else if(e.type=="touchstart") {
xOffset = e.targetTouches[0].clientX - rect.left;
yOffset = e.targetTouches[0].clientY - rect.top;
window.addEventListener('touchmove', dragObject, true);
}
}
/*Drag object*/
function dragObject(e) {
e.preventDefault();
e.stopPropagation();
if(dragObj == null) {
return; // if there is no object being dragged then do nothing
} else if(e.type=="mousemove") {
dragObj.style.left = e.clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.clientY-yOffset +"px";
} else if(e.type=="touchmove") {
dragObj.style.left = e.targetTouches[0].clientX-xOffset +"px"; // adjust location of dragged object so doesn't jump to mouse position
dragObj.style.top = e.targetTouches[0].clientY-yOffset +"px";
}
}
/*End dragging*/
document.onmouseup = function(e) {
if (dragObj) {
dragObj = null;
window.removeEventListener('mousemove', dragObject, true);
window.removeEventListener('touchmove', dragObject, true);
}
}
}
makeDragable('#handle', '#moveable')#moveable {
width: 100px;
height: 100px;
background: blue;
}
#handle {
width: 50px;
height: 50px;
cursor: move;
background: red;
}<div id="moveable">
<div id="handle">
</div>
</div>jnoreiga의 수락 된 답변을 시도한 후 드래그 된 요소가 동일한 상대 위치를 유지하는 대신 갑자기 왼쪽 상단 모서리에 스냅되는 것이 매우 성가신 것을 알았습니다.
This snippet prevents the awkward aforementioned behavior via an offset, and provides a simple interface to create draggable elements one at a time or en masse via a forEach call or similar.
window.onload = function() {
draggable(document.getElementById('foo'));
}
function draggable(el) {
el.addEventListener('mousedown', function(e) {
var offsetX = e.clientX - parseInt(window.getComputedStyle(this).left);
var offsetY = e.clientY - parseInt(window.getComputedStyle(this).top);
function mouseMoveHandler(e) {
el.style.top = (e.clientY - offsetY) + 'px';
el.style.left = (e.clientX - offsetX) + 'px';
}
function reset() {
window.removeEventListener('mousemove', mouseMoveHandler);
window.removeEventListener('mouseup', reset);
}
window.addEventListener('mousemove', mouseMoveHandler);
window.addEventListener('mouseup', reset);
});
}/* The only required styling is position: absolute */
#foo {
position: absolute;
border: 1px solid black;
overflow: hidden;
}
/* Prevents inconsistent highlighting of element while being dragged
Copied from https://stackoverflow.com/questions/826782 */
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}<div id="foo" class="noselect">This is a draggable div!</div>An additional method to "niente00" code.
init : function(className){
var elements = document.getElementsByClassName(className);
for (var i = 0; i < elements.length; i++){
elements[i].onmousedown = function(){mydragg.startMoving(this,'container',event);};
elements[i].onmouseup = function(){mydragg.stopMoving('container');};
}
}
ReferenceURL : https://stackoverflow.com/questions/9334084/moveable-draggable-div
'programing' 카테고리의 다른 글
| querySelector에서 : 첫 번째 요소를 얻고 마지막 요소를 얻는 방법은 무엇입니까? (0) | 2021.01.17 |
|---|---|
| cellForRowAtIndexPath는 어떻게 작동합니까? (0) | 2021.01.17 |
| Symfony2 기본 컨테이너 서비스 목록이 있습니까? (0) | 2021.01.17 |
| CMake는 로컬 파일이 있는지 확인합니다. (0) | 2021.01.17 |
| 경고 : 지정된 대상이 없습니다. 에뮬레이터에 배포 (0) | 2021.01.16 |