Как изменять последовательность блоков DIV мышью или кнопками управления

@Chel · Регистрация: 20.05.2008

Студворк — интернет-сервис помощи студентам

На странице есть несколько блоков div расположенных последовательно. Необходимо написать код, чтобы можно было с помощью кнопок управления или мыши изменять последовательность блоков. Использовать DOM.
Нашел приблизительный код, но он не работает, а сам разобраться не могу.
ПС: просьба сильно не ругать, тк сам новичек. Лучше объясните. )

ППС: Если есть другой код, приму с удовольствием.

Заранее спасибо.

Нашел такой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
</head>
<body >
 
 
<!--<script>
$(document).ready(function() 
{
    var dragObjects = document.getElementById('dragObjects1').getElementsByTagName('img')
    for(var i=0; i<dragObjects.length; i++) {
        dragMaster1.makeDraggable(dragObjects[i])
    }
})
 
</script>-->
 
<script>
var dragMaster = (function() {
        var dragObject
        var mouseOffset
     
        // получить сдвиг target относительно курсора мыши
        function getMouseOffset(target, e) {
            var docPos  = getPosition(target)
            return {x:e.pageX - docPos.x, y:e.pageY - docPos.y}
        }
     
        function mouseUp(){
            dragObject = null
     
            // очистить обработчики, т.к перенос закончен
            document.onmousemove = null
            document.onmouseup = null
            document.ondragstart = null
            document.body.onselectstart = null
        }
     
        function mouseMove(e){
            e = fixEvent(e)
     
            with(dragObject.style) {
                position = 'absolute'
                top = e.pageY - mouseOffset.y + 'px'
                left = e.pageX - mouseOffset.x + 'px'
            }
            return false
        }
     
        function mouseDown(e) {
            e = fixEvent(e)
            if (e.which!=1) return
     
            dragObject  = this
     
            // получить сдвиг элемента относительно курсора мыши
            mouseOffset = getMouseOffset(this, e)
     
            // эти обработчики отслеживают процесс и окончание переноса
            document.onmousemove = mouseMove
            document.onmouseup = mouseUp
     
            // отменить перенос и выделение текста при клике на тексте
            document.ondragstart = function() { return false }
            document.body.onselectstart = function() { return false }
     
            return false
        }
     
        return {
            makeDraggable: function(element){
                element.onmousedown = mouseDown
            }
        }
     
    }())
     
    function getPosition(e){
        var left = 0
        var top  = 0
     
        while (e.offsetParent){
            left += e.offsetLeft
            top  += e.offsetTop
            e    = e.offsetParent
        }
     
        left += e.offsetLeft
        top  += e.offsetTop
     
        return {x:left, y:top}
    }
 
</script>
<h3 id="demo" >Перемещаем мышью рисунки</a></h3>
<p><fieldset><br />
<legend>Перенеси меня</legend></p>
<div id="dragObjects1"><img src="1.gif" /></div>
<div id="dragObjects1"><img src="2.gif"/></div>
<div id="dragObjects1"><img src="3.gif"/></div>
<div id="dragObjects1"><img src="4.gif"/></div>
<p></fieldset></p>
</body>
</html>

@conformist · 06.03.2012, 21:39

а вот почему Вы все, с такими вопросами, упорно проходите мимо раздела javascript? вам сюда

@Chel · 07.03.2012, 09:07 **[ТС]**

сорри, модераторы, перенесите, пожалуйста, в нужную ветку
спасибо

ps вот ссылочка на пример с перемещением объектов на странице. http://javascript.ru/ui/dragan... e-elementa
может кто-нибудь мог бы помочь переделать и подогнать к условию?

@Chel · 20.03.2012, 01:18 **[ТС]**

up
помогите, плиз

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@conformist O tempora, o mores! 238 / 172 / 13 Регистрация: 15.01.2012 Сообщений: 681
	06.03.2012, 21:39
	а вот почему Вы все, с такими вопросами, упорно проходите мимо раздела javascript? вам сюда 0

@Chel 0 / 0 / 0 Регистрация: 20.05.2008 Сообщений: 20
	07.03.2012, 09:07 [ТС]
	сорри, модераторы, перенесите, пожалуйста, в нужную ветку спасибо ps вот ссылочка на пример с перемещением объектов на странице. http://javascript.ru/ui/dragan... e-elementa может кто-нибудь мог бы помочь переделать и подогнать к условию? 0

@Chel 0 / 0 / 0 Регистрация: 20.05.2008 Сообщений: 20
	20.03.2012, 01:18 [ТС]
	up помогите, плиз 0