Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Drag and drop - element.onmousedown (https://javascript.ru/forum/dom-window/21533-drag-drop-element-onmousedown.html)

h6wk1r 14.09.2011 00:14

Drag and drop - element.onmousedown
 
Сразу говорю, в js я новичок.
Из статьи про Drag and drop:
http://javascript.ru/ui/draganddrop
element.onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

не работает; если вместо element.onmousedown написать document.onmousedown то всё нормально. Вообще что такое element в данном коде? Ключевое слово или предполагается, что вместо element надо что-то подставить? И где про это можно прочитать?

Magneto 14.09.2011 01:07

Предполагается что это тот елемент (картинка, блок и т.д.) над которым совершаются какие либо действия, в данном случае его собираются перетаскивать.

Sweet 14.09.2011 01:21

element - это переменная:)

h6wk1r 14.09.2011 09:36

Цитата:

Сообщение от Magneto (Сообщение 126376)
Предполагается что это тот елемент (картинка, блок и т.д.) над которым совершаются какие либо действия, в данном случае его собираются перетаскивать.

document.getElementById('b_2').onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

<img id="b_2" src="torrent.png">

Так тоже пытался, не работает.
----------------------------------------------------------
Цитата:

Сообщение от Sweet (Сообщение 126379)
element - это переменная:)

var dragObject     = null;
var element        = null;
element.onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

И так тоже не работает.

Где ещё можно прочитать про Drag and drop?

Sweet 14.09.2011 11:24

var element        = null;
element.onmousedown...

Очевидно же, что работать не будет:)
Цитата:

Сообщение от h6wk1r
Где ещё можно прочитать про Drag and drop?

А зачем? Если нужно что-нибудь сделать, возьми jQuery: и инфы полно, и просто.

h6wk1r 14.09.2011 12:52

Знчит element это указатель на картинку, блок и т.д.
var dragObject     = null;
var element        = document.getElementById('b_2');
element.onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

<img id="b_2" src="torrent.png">

Но код всёравно не работает.
В общем я так понял, что лучше использовать jQuery ...

Magneto 14.09.2011 13:18

Все там работает. Если хочется разобраться в этом вопросе то продолжай читать мануалы, спрашивать на форуме, а так да JQuery.

<img id="b_2" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

<script>
document.getElementById('b_2').onmousedown = function(e){
alert('сработало событие OnMouseDown')
}
</script>

melky 14.09.2011 13:42

Цитата:

Сообщение от h6wk1r (Сообщение 126406)
Знчит element это указатель на картинку, блок и т.д.
var dragObject     = null;
var element        = document.getElementById('b_2');
element.onmousedown = function(e){
    // запомнить переносимый объект 
    // в переменной dragObject
    dragObject  = this

    // остановить обработку события
    return false
}

<img id="b_2" src="torrent.png">

Но код всёравно не работает.

в файле demo.html есть снизу страницы такой код

var dragObjects = document.getElementById('dragObjects').getElementsByTagName('img')

for(var i=0; i<dragObjects.length; i++) {
	new DragObject(dragObjects[i])
}

new DropTarget(document.getElementById('trash'))

зачем вы полезли в исходный код?

ваш пример будет примерно так звучать на букавках

var element = document.getElementById("b_2")
new DragObject( element )


не убедил?

живой пример :

<style>
div { padding: 2px; border: 1px red solid; position: absolute; }
</style>


<div id="b_2">
     my el. lol 
</div>

<script src="http://javascript.ru/files/dnd/final/DragObject.js"></script>
<script src="http://javascript.ru/files/dnd/final/DropTarget.js"></script>
<script src="http://javascript.ru/files/dnd/final/dragMaster.js"></script>
<script src="http://javascript.ru/files/dnd/final/helpers.js"></script>
<script>
var element = document.getElementById("b_2")
new DragObject( element )
</script>

PS. то, что он возвращается на свою позицию, можно убрать. сейчас спешу, но вечером поправлю пост. удачи :)

Цитата:

Сообщение от Sweet (Сообщение 126395)
А зачем? Если нужно что-нибудь сделать, возьми jQuery: и инфы полно, и просто.

плохой, очень плохой совет.:stop:

зачем тогда программировать на JS, если можно индуса в рабство взять? он будет писать код, код будет работать, но расширяемость кода и его качество останется в параше.

Sweet 14.09.2011 14:24

Цитата:

Сообщение от melky
плохой, очень плохой совет.

Нормальный. Просто есть два варианта: 1. Человек хочет изучить программирование на клиенте (в браузере). Тогда, конечно, нужно сначала изучить js. Затем можно посмотреть библиотеки. На это нужно относительно много времени (месяцы). 2. Человеку нужно как можно быстрее решить задачу. С jQuery это возможно. Мне показалось, тут второй вариант.

h6wk1r 14.09.2011 16:14

На самом деле я никуда не тороплюсь. Думаю лучше знать и библиотеку jquery, и в тоже время, как можно без неё обойтись.


Часовой пояс GMT +3, время: 04:17.