Как изменять последовательность блоков 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
помогите, плиз

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@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