Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.07.2010, 17:16
Аспирант
Отправить личное сообщение для Арсений Посмотреть профиль Найти все сообщения от Арсений
 
Регистрация: 14.05.2010
Сообщений: 34

Как можно перемещать Div'ак?
Доброе время суток.
Такой вопрос
Скажем есть Div с размеров 4 на 4px и залитый каким либо цветом, как можно сделать, что бы можно было мышкой его перемещать?
Но без использования каких либо библиотек.
Ответить с цитированием
  #2 (permalink)  
Старый 01.07.2010, 17:26
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

http://javascript.ru/ui/draganddrop
Ответить с цитированием
  #3 (permalink)  
Старый 01.07.2010, 17:42
Аспирант
Отправить личное сообщение для Арсений Посмотреть профиль Найти все сообщения от Арсений
 
Регистрация: 14.05.2010
Сообщений: 34

оо большое спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2010, 13:07
Аспирант
Отправить личное сообщение для Арсений Посмотреть профиль Найти все сообщения от Арсений
 
Регистрация: 14.05.2010
Сообщений: 34

Перечитал все, что там написано несколько раз
Понял как делать с клонированием, но вот как сделать с обычным переносом чет у меня не получается вроде делаю все правильно, как там сказано, а переносить картинку и оставлять ее в том месте где я отпускаю кнопку мыши не выходит.
Может я, что то не так делаю подскажите
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2010, 13:34
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Сообщение от Арсений
Может я, что то не так делаю
может, Вы покажите, что у Вас есть.
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2010, 13:41
Аспирант
Отправить личное сообщение для Арсений Посмотреть профиль Найти все сообщения от Арсений
 
Регистрация: 14.05.2010
Сообщений: 34

вот код страницы
<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

конечно я могу их сюда выкинуть но они громоздкие и думаю что будет не удобно их читать
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2010, 13:48
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Арсений,
Неохота разбираться в этих скриптах, кину Вам маленький незамысловатый скриптик:
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>
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2010, 14:22
Аспирант
Отправить личное сообщение для Арсений Посмотреть профиль Найти все сообщения от Арсений
 
Регистрация: 14.05.2010
Сообщений: 34

JsLoveR
спасибо все получилось
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 21:22
Как можно изменить URL в адресной строке браузера? балерун Events/DOM/Window 12 17.11.2009 13:08
можно ли, если да то как удалить строки из таблицы Avaria Я не знаю javascript 3 11.06.2009 03:03
как можно создать iframe со скриптами GOll Общие вопросы Javascript 2 05.05.2009 11:32
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30