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

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

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

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

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

PHP/HTML

<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

<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

(() => {
    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

.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;
}

	03.03.2019, 11:29