Как можно перемещать Div'ак?
Доброе время суток.
Такой вопрос:) Скажем есть Div с размеров 4 на 4px и залитый каким либо цветом, как можно сделать, что бы можно было мышкой его перемещать? Но без использования каких либо библиотек. |
|
оо большое спасибо
|
Перечитал все, что там написано несколько раз
Понял как делать с клонированием, но вот как сделать с обычным переносом чет у меня не получается вроде делаю все правильно, как там сказано, а переносить картинку и оставлять ее в том месте где я отпускаю кнопку мыши не выходит. Может я, что то не так делаю подскажите |
Цитата:
|
вот код страницы
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/point.css" type="text/css" />
<title>Stick</title>
[JS]
<script src="DragObject.js"></script>
<script src="dragMaster.js"></script>
<script src="fixEvent.js"></script>
<script type="text/javascript" language="javascript">
document.getElementById( 'img' ).onclick = function (e) {
e = e || window.event
var div = document.createElement( "div" );
div.id = "dragObjects";
div.style.position = "absolute";
div.style.width = "20px";
div.style.height = "20px";
div.style.backgroundColor = "blue";
div.style.top = (e.pageY)+"px",
div.style.left = (e.pageX)+"px";
document.body.appendChild( div );
}
</script>[/JS]
</head>
<body>
<div id="container">
<div>
<img id="img" src="img/111.jpg" />
</div>
</div>
</body>
файлы javaScript <script src="DragObject.js"></script> <script src="dragMaster.js"></script> <script src="fixEvent.js"></script> я беру те которые приведены тут http://javascript.ru/ui/draganddrop конечно я могу их сюда выкинуть но они громоздкие и думаю что будет не удобно их читать |
Арсений,
Неохота разбираться в этих скриптах, кину Вам маленький незамысловатый скриптик:
var changePosition=null,offX=null,offY=null;
function move(id,e)
{
e = e || window.event;
if( e.preventDefault ) e.preventDefault();
else e.returnValue = false;
if(changePosition)
{
changePosition=document.getElementById(id);
var x=e.clientX-offX;
var y=e.clientY-offY;
changePosition.style.left=x+"px";
changePosition.style.top=y+"px";
}
}
function release()
{
changePosition=null;
}
function capture(e)
{
e = e || window.event;
if( e.preventDefault ) e.preventDefault();
else e.returnValue = false;
offX=e.offsetX || e.layerX;
offY=e.offsetY || e.layerY;
if(!changePosition)
{
changePosition=document.getElementById("el");
}
}
<body onmousemove="move('el',event)">
<div onmouseup="release()" onmousedown="capture(event)" id="el" style="width:300px; height:200px; position:absolute; border:1px solid #000000; background-color:#996600;" ></div>
</body>
|
JsLoveR
спасибо все получилось :) |
| Часовой пояс GMT +3, время: 17:51. |