Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.08.2012, 14:15
Интересующийся
Отправить личное сообщение для Elve Посмотреть профиль Найти все сообщения от Elve
 
Регистрация: 11.06.2012
Сообщений: 25

drag and drop
Вот почитав уроки по драгу решил опробовать их сам и тут же столкнулся с проблемой реализации...
Позаимствовав http://javascript.ru/files/dnd/fixEvent.js и http://javascript.ru/files/dnd/drag.js . Как вы увидите в коде, они подключаются. Задача такова, вот тут http://javascript.ru/ui/draganddrop есть пример, где перетаскиваем знаки карт ("Перенеси меня"). Я же хочу его чуть модифицировать, чтобы при клике по странице добавлялась картинка (любой масти конкретно заданной) в месте клика и ее можно было бы уже перетаскивать. При клике по пустому месту добавлялась еще одна.
Реализация с добавлением в конкретное место работает нормально
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ru" class="js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drag and drop</title>
<style type="text/css">
html {
	height:100%;
	width:100%;
}
</style>
<script src="http://javascript.ru/files/dnd/fixEvent.js"></script>
<script src="http://javascript.ru/files/dnd/drag.js"></script>
</head>
<body id="all_page" style="height:100%; width:100%;">
<script>
document.getElementById('all_page').onclick = function () {
	var newImg = document.createElement('img');
	newImg.src  = "http://javascript.ru/files/dnd/img/bubi.gif";
	newImg.style.cssText = "position: absolute; \
        left:100px;\ 
        top:100px;\ ";
	document.getElementById('dragObjects1').appendChild(newImg)
	var dragObjects = document.getElementById('dragObjects1').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
      dragMaster1.makeDraggable(dragObjects[i])
}
}
</script>
<div id="dragObjects1" style="height:100%; width:100%;">
</div>

</body></html>

Единственный момент тут для меня непонятный, почему добавляется еще 1 элемент при перетаскивании предыдущего. То есть я нажимаю на имг а все равно вызывается функция нажатия по ИД.
Но вот если надо добавить изображение в точке клика работать перестает
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="ru" class="js"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Drag and drop</title>
<style type="text/css">
html {
	height:100%;
	width:100%;
}
</style>
<script src="http://javascript.ru/files/dnd/fixEvent.js"></script>
<script src="http://javascript.ru/files/dnd/drag.js"></script>
</head>
<body id="all_page" style="height:100%; width:100%;">
<script>
document.getElementById('all_page').onclick = function () {
	var newImg = document.createElement('img');
	newImg.src  = "http://javascript.ru/files/dnd/img/bubi.gif";
	newImg.style.cssText = "position: absolute; \ ";
       newImg.style.top = document.pageY-2+'px';
        newImg.style.left= document.pageX+'px';
	document.getElementById('dragObjects1').appendChild(newImg)
	var dragObjects = document.getElementById('dragObjects1').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
      dragMaster1.makeDraggable(dragObjects[i])
}
}
</script>
<div id="dragObjects1" style="height:100%; width:100%;">
</div>

</body></html>

Вот с кодом newImg.style.top = document.pageY-2+'px';newImg.style.left= document.pageX+'px'; уже не работает. Может вы подскажите в чем суть проблемы?
П.С. Если не сложно дайте ссылочку на тему где описано как делать код рабочим на форуме(запускать код прямо в теме)

Последний раз редактировалось Elve, 20.08.2012 в 18:23.
Ответить с цитированием
  #2 (permalink)  
Старый 20.08.2012, 14:59
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

советую прочитать эту статью http://learn.javascript.ru/drag-and-drop-objects она подробней, а если после нее не разберетесь апните вопрос
Ответить с цитированием
  #3 (permalink)  
Старый 20.08.2012, 15:17
Интересующийся
Отправить личное сообщение для Elve Посмотреть профиль Найти все сообщения от Elve
 
Регистрация: 11.06.2012
Сообщений: 25

Читал я этот урок тоже. Там другой вариант выбора элемента через аватар перемещение, но у меня то немного другая проблема, почему-то не работает document.pageY и document.pageХ . Не задает координаты и делает скрипт нерабочим.
Ответить с цитированием
  #4 (permalink)  
Старый 20.08.2012, 15:22
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

ну так нужно делать не document.pageX ,a event.pageX причем event не глобальный обьект(глобальный обьект это для ие) а параметр передаваемые в функцию события
Ответить с цитированием
  #5 (permalink)  
Старый 20.08.2012, 15:24
Интересующийся
Отправить личное сообщение для Elve Посмотреть профиль Найти все сообщения от Elve
 
Регистрация: 11.06.2012
Сообщений: 25

еще натыкался в интернете на такое решение добавления элемента в месте клика
body>
    <div id="container" style="width: 250px; margin: 0 auto;">
        <div id="box" style="position:relative; overflow-x: scroll; width: 250px;">
            <img id="img" src="picture.jpg" />
        </div>
    </div>
</body>

var x=event.pageX, y=event.pageY;
        var a=document.createElement('div');
        a.className='myblock'; // параметры завел в стилевой файл
        a.style.top=y-2+'px'; // координаты инфоблока буду на 2 пикселя левее-выше щелчка
        a.style.left=x-2-(body.clientWidth-250)/2+parent.scrollLeft+'px'; // учитываем возможную прокрутку картинки относительно контейнера
        parent.appendChild(a);

Не знаю, можно или нет давать ссылки, если нельзя уберу, вот источник
http://www.askdev.ru/question/10784/...B%D0%BE%D0%BC/
Ответить с цитированием
  #6 (permalink)  
Старый 20.08.2012, 15:38
Интересующийся
Отправить личное сообщение для Elve Посмотреть профиль Найти все сообщения от Elve
 
Регистрация: 11.06.2012
Сообщений: 25

Сообщение от cyber Посмотреть сообщение
ну так нужно делать не document.pageX ,a event.pageX причем event не глобальный обьект(глобальный обьект это для ие) а параметр передаваемые в функцию события
event = fixEvent(event);
	var k = event.pageX;
	var c = event.pageY;
	newImg.style.left = k+'px';
	newImg.style.top= c+'px';

Я пробовал такое по аналогии с
document.onmousemove = mouseMove

function mouseMove(event){ 
	event = fixEvent(event);
	document.getElementById('mouseX').value = event.pageX;
	document.getElementById('mouseY').value = event.pageY;
}

Это пример с той же страницы, что я указывал, пример где определяется координата мыши и записывается в текстовое поле.
Ответить с цитированием
  #7 (permalink)  
Старый 20.08.2012, 16:06
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

что бы запустить код на форуме в теги HTML нужно дописать run через пробел
Ответить с цитированием
  #8 (permalink)  
Старый 20.08.2012, 16:07
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

Сообщение от Elve Посмотреть сообщение
event = fixEvent(event);
	var k = event.pageX;
	var c = event.pageY;
	newImg.style.left = k+'px';
	newImg.style.top= c+'px';

Я пробовал такое по аналогии с
document.onmousemove = mouseMove

function mouseMove(event){ 
	event = fixEvent(event);
	document.getElementById('mouseX').value = event.pageX;
	document.getElementById('mouseY').value = event.pageY;
}

Это пример с той же страницы, что я указывал, пример где определяется координата мыши и записывается в текстовое поле.
и вы хотите сказать он не работает?
Ответить с цитированием
  #9 (permalink)  
Старый 20.08.2012, 17:36
Интересующийся
Отправить личное сообщение для Elve Посмотреть профиль Найти все сообщения от Elve
 
Регистрация: 11.06.2012
Сообщений: 25

Сообщение от cyber Посмотреть сообщение
и вы хотите сказать он не работает?
Нет,
event = fixEvent(event);
	var k = event.pageX;
	var c = event.pageY;
	newImg.style.left = k+'px';
	newImg.style.top= c+'px';

Этот код выдает ошибку( пишет перменная k не задана)
Ответить с цитированием
  #10 (permalink)  
Старый 20.08.2012, 17:58
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

конечно он не работает *сарказм*
<!DOCTYPE HTML>
<html>
  <head> </head>
  <body>

    <a href='#' id='link'>text</a>   
    <script>
function fixEvent(e) {
	// получить объект событие для IE
	e = e || window.event

	// добавить pageX/pageY для IE
	if ( e.pageX == null && e.clientX != null ) {
		var html = document.documentElement
		var body = document.body
		e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
		e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
	}

	// добавить which для IE
	if (!e.which && e.button) {
		e.which = e.button & 1 ? 1 : ( e.button & 2 ? 3 : ( e.button & 4 ? 2 : 0 ) )
	}

	return e
}
      
 var elem = document.getElementById('link');
      
      elem.onclick = function (evt) {
      
      var e = fixEvent(evt);
      alert(e.pageX);
        
        return false;
      }   


    </script>

  </body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Помогите с drag and drop shtopor jQuery 1 20.02.2012 13:26
Разбираюсь с drag and drop uaNikita Events/DOM/Window 4 22.09.2011 11:25
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01
Drag & Drop в полном объеме dizews Events/DOM/Window 3 26.07.2007 12:43