per*_*on0 54 javascript move draggable mousemove
这是我更新和修改过的脚本,它完全可以工作,除了我想要普及它...观察****我怎么能这样做,这样我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';
}
}
jno*_*iga 68
jQuery是你的选择吗？由于代码已经存在,它使您正在做的事情变得非常简单.
http://jqueryui.com/demos/draggable/
JavaScript代码
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';
}?
小智 53
这是一个很好的no-jQuery脚本来拖动div: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>
Nie*_*sol 13
好吧,您的移动代码简化为:
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);}.
在尝试了 jnoreiga 接受的答案后，我发现被拖动的元素突然捕捉到左上角，而不是保持相同的相对位置，这很烦人。
此代码段通过偏移防止了上述尴尬的行为，并提供了一个简单的界面来一次创建一个或通过forEach调用或类似方式批量创建可拖动元素。
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>我稍微修改了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>| 归档时间： |
|
| 查看次数： |
170691 次 |
| 最近记录： |