Предоставить возможность пользователю перемещать картинки с использованием механизма «drag and drop»

@sisi11 · Регистрация: 09.02.2018

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

Расположить в окне несколько картинок. Предоставить возможность пользователю перемещать картинки с использованием механизма «drag and drop»

как добавить drag and drop?
заранее спасибо

PHP/HTML
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
<html>
<head>
<title>
3 drag and drop
</title>
</head>
<div id="d1" class="d"></div>
<div id="d2" class="d"></div>
<style>
.d {
  position:relative;
  width: 50px;
  height: 50px;
  border: 5px solid #ccc;
  background-color: white
}
#d2 {
  margin-top: -25px;
  margin-left: 25px;
  background-color: red
}
</style>
<script>
document.querySelectorAll('.d').forEach(i => i.ondblclick = event => {
    document.querySelectorAll('.d').forEach(i => i.style.zIndex = 1)
    event.target.style.zIndex = 2
})
</script>
</html>

@Mr_Sergo · 03.03.2019, 11:29

sisi11,

Можно так -> https://codepen.io/Mr_Sergo/pen/XGdQvP

HTML5
1
2
3
4
<div class="pic" id="one"></div>
<div class="pic" id="two"></div>
<div class="pic" id="three"></div>
<div class="pic" id="four"></div>

JavaScript
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
(() => {
    let old, calcX, calcY, z = 1;
    document.addEventListener('mousedown',e => {
        if(e.target.classList.contains('pic')){
            let el = document.querySelectorAll('.pic')[[...document.querySelectorAll('.pic')].indexOf(e.target)];
            main(e,el);
        }
    });
    function main(e,el){
        if(old) old.classList.remove('active');
        el.classList.add('active');
        document.querySelector('.active').style.zIndex = z++;
        old = el;
        calcX = e.pageX - el.offsetLeft, calcY = e.pageY - el.offsetTop;
        move(e);
        document.addEventListener('mousemove',move);
        el.addEventListener('mouseup',end);
        function move(e){
            document.getSelection().removeAllRanges();
            el.style.left = e.pageX - calcX + 'px';
            el.style.top = e.pageY - calcY + 'px';
        }
        function end(){
            if(old) old.classList.remove('active');
            document.removeEventListener('mousemove',move);
            el.removeEventListener('mouseup',end);
        }
    }
})();

CSS
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
.pic{
    width: 100px;
    height: 100px;
    position: absolute;
    z-index: 0;
    background: rgba(0, 255, 10, 0.5);
    box-shadow: -2px -1px 8px -2px #000;
    border-style: solid;
    border-color: #e4e4e4;
    border-width: 10px 10px 50px 10px;
}
 
.active{
    box-shadow: -2px -1px 20px -3px #000;
}
 
#one{
    background-image: url(https://pp.userapi.com/c849416/v849416811/13d2e3/Tsd9T_fLiD4.jpg);
    background-repeat: no-repeat;
}
 
#two{
    left: 30px;
    top: 30px;
}
 
#three{
    left: 60px;
    top: 60px;
    background-image: url(https://pp.userapi.com/c849416/v849416811/13d2f1/8i73jwgUPek.jpg);
    background-repeat: no-repeat;
}
 
#four{
    left: 90px;
    top: 90px;
    background-image: url(https://pp.userapi.com/c849416/v849416811/13d2ea/mM6hEHXbOkY.jpg);
    background-repeat: no-repeat;
}

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем