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