JS拖动 拖拽例子

javascript 拖动 拖拽例子

var mydiv = document.createElement("div");
mydiv.style = "z-index: 9999; height: 35px; width: 35px; background-color: rgb(255, 255, 255); position: fixed; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 17.5px; right: 9px; top: 9px; text-align-last: center; color: rgb(0, 0, 0); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; user-select: none; visibility: visible;";
mydiv.innerText = "译";
dragelement(mydiv);
document.body.append(mydiv);
function dragelement(dragele){
    dragele.draggable = true;
    dragele.addEventListener("dragstart", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            this.tempNode = document.createElement('div'); 
            this.tempNode.style = "width:1px;height:1px;opacity:0"; 
            document.body.appendChild(this.tempNode); 
            ev.dataTransfer.setDragImage(this.tempNode, 0, 0); 
            this.oldX = ev.offsetX - Number(this.style.width.replace('px', '')); 
            this.oldY = ev.offsetY 
        });
    dragele.addEventListener("drag", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            if (!ev.x && !ev.y) return; 
            this.style.right = Math.max(window.innerWidth - ev.x + this.oldX, 0) + "px"; 
            this.style.top = Math.max(ev.y - this.oldY, 0) + "px" 
        });
    dragele.addEventListener("dragend", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            //GM_setValue("position_right", this.style.right); 
            //GM_setValue("position_top", this.style.top); 
            document.body.removeChild(this.tempNode) 
        });
    dragele.addEventListener("touchstart", 
        ev => { 
            ev.stopImmediatePropagation(); 
            ev.preventDefault(); 
            ev = ev.touches[0]; dragele._tempTouch = {}; 
            const base = dragele.getClientRects()[0]; 
            dragele._tempTouch.oldX = base.x + base.width - ev.clientX; 
            dragele._tempTouch.oldY = base.y - ev.clientY 
        });
    dragele.addEventListener("touchmove", 
        ev => { 
            ev.stopImmediatePropagation(); 
            ev = ev.touches[0]; 
            dragele.style.right = Math.max(window.innerWidth - dragele._tempTouch.oldX - ev.clientX, 0) + 'px'; 
            dragele.style.top = Math.max(ev.clientY + dragele._tempTouch.oldY, 0) + 'px'; dragele._tempIsMove = true 
        });
    dragele.addEventListener("touchend", 
        ev => { 
            ev.stopImmediatePropagation(); 
            //GM_setValue("position_right", dragele.style.right); 
            //GM_setValue("position_top", dragele.style.top); 
            if (!dragele._tempIsMove) { dragele.style.display = 'flex' }; 
            dragele._tempIsMove = false 
        })
}

var mydiv = document.createElement("div");
mydiv.style = "z-index: 9999; height: 35px; width: 35px; background-color: rgb(255, 255, 255); position: fixed; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 17.5px; left: 9px; top: 9px; text-align-last: center; color: rgb(0, 0, 0); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; user-select: none; visibility: visible;";
mydiv.innerText = "译";
dragelement1(mydiv);
document.body.append(mydiv);
function dragelement1(dragele){
    const origin = { x: 0, y: 0 };//原始位置
    dragele.draggable = true;
    dragele.addEventListener("dragstart", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            //记录拖动时的位置
            origin.x=ev.clientX;
            origin.y=ev.clientY;
            console.log("Origin:", origin.x, origin.y);
            console.log("ev.target.offset:", ev.target.offsetTop, ev.target.offsetLeft);
            //设置控件透明度
            console.log(ev.target);
            ev.target.style.opacity=0.8;
        });
    dragele.addEventListener("drag", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            if (!ev.x && !ev.y) return; 
        });
    dragele.addEventListener("dragend", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            ev.target.style.opacity="";
            // 计算拖动结束之后，元素的终点坐标与起始坐标的偏移
            const offsetX=ev.clientX-origin.x;
            const offsetY=ev.clientY-origin.y;
            console.log("dragend ev.target.offset:", ev.target.offsetTop, ev.target.offsetLeft);
            // 修改元素的位置
            ev.target.style.setProperty("top", `${ev.target.offsetTop + offsetY}px`);
            ev.target.style.setProperty("left", ev.target.offsetLeft + offsetX + "px");
            console.log("target.offsetTop&offsetR:",ev.target.offsetTop + offsetY, ev.target.offsetLeft + offsetX);
        }); 
    dragele.addEventListener("drag", 
        function (ev) { 
            ev.stopImmediatePropagation(); 
            ev.preventDefault(); 
        }); 
}