Форум

Elve · #1 (**permalink**) 20.08.2012, 14:15

Вот почитав уроки по драгу решил опробовать их сам и тут же столкнулся с проблемой реализации...
Позаимствовав 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'; уже не работает. Может вы подскажите в чем суть проблемы?
П.С. Если не сложно дайте ссылочку на тему где описано как делать код рабочим на форуме(запускать код прямо в теме)

cyber · #2 (**permalink**) 20.08.2012, 14:59

советую прочитать эту статью http://learn.javascript.ru/drag-and-drop-objects она подробней, а если после нее не разберетесь апните вопрос

Elve · #3 (**permalink**) 20.08.2012, 15:17

Читал я этот урок тоже. Там другой вариант выбора элемента через аватар перемещение, но у меня то немного другая проблема, почему-то не работает document.pageY и document.pageХ . Не задает координаты и делает скрипт нерабочим.

cyber · #4 (**permalink**) 20.08.2012, 15:22

ну так нужно делать не document.pageX ,a event.pageX причем event не глобальный обьект(глобальный обьект это для ие) а параметр передаваемые в функцию события

Elve · #5 (**permalink**) 20.08.2012, 15:24

еще натыкался в интернете на такое решение добавления элемента в месте клика

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/

Elve · #6 (**permalink**) 20.08.2012, 15:38

Сообщение от 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;
}

Это пример с той же страницы, что я указывал, пример где определяется координата мыши и записывается в текстовое поле.

cyber · #7 (**permalink**) 20.08.2012, 16:06

что бы запустить код на форуме в теги HTML нужно дописать run через пробел

cyber · #8 (**permalink**) 20.08.2012, 16:07

Сообщение от 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;
}

Это пример с той же страницы, что я указывал, пример где определяется координата мыши и записывается в текстовое поле.

и вы хотите сказать он не работает?

Elve · #9 (**permalink**) 20.08.2012, 17:36

Сообщение от cyber

и вы хотите сказать он не работает?

Нет,

event = fixEvent(event);
	var k = event.pageX;
	var c = event.pageY;
	newImg.style.left = k+'px';
	newImg.style.top= c+'px';

Этот код выдает ошибку( пишет перменная k не задана)

cyber · #10 (**permalink**) 20.08.2012, 17:58

конечно он не работает *сарказм*

<!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>

Форум

Справочник

Discord чат

Курсы javascript