Любой, кто хорошо с перетаскиванием

Question

Я сижу здесь, пытаясь узнать о перетаскивании - (не то, что это что-то особенно трудно), но одна вещь действительно мне на нервы: я слежу этот

http://www.w3schools.com/html/html5_draganddrop.asp

Я не понимаю, почему элементы (в данном случае изображения) стекаются при перетаскивании друг на друга: есть ли способ предотвратить это? так что ничего не происходит, когда кто-то пытается перетащить элемент, способный к перетаскиванию, поверх другого элемента с возможностью перетаскивания - надеюсь, у кого-то есть время, чтобы помочь :)

Answer 1

Я думаю, что это может помочь, если я попытаюсь объяснить, что я хочу, чтобы создать

Я хотел бы создать этот What i want to create

список с различными элементами, которые могут быть потащило вперед и назад, чтобы перетащить область - в зависимости от того, что пользователь хочет: элементы должны никогда не быть одеты друг на друга, так как один из элементов тогда будет disapere

Шаг второй затем должен написать то, что понимает, какие элементы занимает область перетаскивания а затем использовать PHP для отправки мне электронной почты с имена элементов chossen пользователя - но что-то compleatly разница: D

function allowDrop(ev) { 
 
    ev.preventDefault(); 
 
} 
 

 
function drag(ev) { 
 
    ev.dataTransfer.setData("text", ev.target.id); 
 
} 
 

 
function drop(ev) { 
 
    ev.preventDefault(); 
 
    var data = ev.dataTransfer.getData("text"); 
 
    ev.target.appendChild(document.getElementById(data)); 
 
} 
 
/* 
 
if($("#div1").has(".drag-img").length)){ 
 

 
} 
 
*/

\t #element-box{ 
 
\t \t border-radius: 10px; 
 
\t \t background-color: #333333; 
 
\t \t height: 50px; 
 
\t \t width:50px; 
 
\t \t display: inline-block; 
 
\t \t margin: 10px 20px; 
 
\t } 
 

 
\t #div1{ 
 
     width:400px; 
 
     height:70px; 
 
     padding:20px; 
 
     border:1px solid #aaaaaa; 
 
    } 
 

 
    #drag1{ 
 
    background: red; 
 
    } 
 

 
    #drag2{ 
 
    background: blue; 
 
    } 
 

 
    #drag3{ 
 
    background: green; 
 
    } 
 

 
    #drag4{ 
 
    background: orange; 
 
    } 
 

 
    #drag5{ 
 
    background: hotpink; 
 
    }

<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag1" src="img/one.jpg" draggable="true" 
 
ondragstart="drag(event)" width="100%" height="100%"/></div> 
 
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag2" src="img/two.jpg" draggable="true" 
 
ondragstart="drag(event)" width="100%" height="100%"/></div> 
 
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag3" src="img/three.jpg" draggable="true" 
 
ondragstart="drag(event)" width="100%" height="100%"/></div> 
 
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag4" src="img/four.jpg" draggable="true" 
 
ondragstart="drag(event)" width="100%" height="100%"/></div> 
 
<div id="element-box" ondrop="drop(event)" ondragover="allowDrop(event)"><img class="drag-img" id="drag5" src="img/five.jpg" draggable="true" 
 
ondragstart="drag(event)" width="100%" height="100%"/></div> 
 

 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Answer 2

Я вижу, откуда возникает путаница. В будущем я предлагаю учиться из нескольких источников информации, чтобы вы могли узнать, что урок может забыть покрыть.

В примере, в котором был изначально написан пример, атрибуты были добавлены в div, чтобы позволить ему «перетаскивать» содержимое «отбрасываться» на него. Вот фрагмент кода в примере, за которым следует прокомментированная строка для объяснения обоих используемых атрибутов.

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> 

Рабочие атрибуты:

• ondrop="drop(event), который выполняет 'событие', когда элемент упал
• ondragover="allowDrop(event)" Что позволяет 'падение', чтобы произойти.

---

Суть урока здесь в том, что способность к DIV иметь что-то «упал» на это то, что было позволено иметь эту способность. Другими словами: если у него нет необходимых атрибутов для выполнения поведения скрипта, он не будет разрешен (потому что условия «drop», то есть элемент «перетаскиваемый», «отбрасываются» на элемент с. ..
ondrop="drop(event)" ondragover="allowDrop(event)"
... атрибуты, установленные соответствующим образом, не были выполнены)

Я решил сохранить и отредактировать этот пример и добавьте к уровню демонстрации, потому что вы уже знакомы с ним. Некоторые вещи, о которых следует помнить:

• Обратите внимание, как если бы котенок был «сброшен» на «недействительный» элемент, красная подсветка остается. Это должно показать, что скрипты здесь завершили функцию 'drag', но не функцию 'drop'. «drag» создает красные эффекты, «drop» скрывает их. Сценарий делает это, изменяя соответствующие свойства CSS для указанных эффектов.
• Я представил несколько примеров Codepen, чтобы показать использование различных вкладок/окон, в отличие от примера W3Schools (чтобы быть тщательным и продемонстрировать, как он будет выглядеть без использования тегов «script» или «style»)
• Я решил использовать самый простой код в сценарии, например, задавать свойства CSS для каждого div отдельно и повторять использование одной и той же переменной. Я бы не рекомендовал писать его так, как это ни в чем, кроме экспериментов .
• Я добавил комментарии внутри, чтобы помочь вам понять, что делает каждая из более сложных частей.

http://codepen.io/anon/pen/WwdgbY
http://codepen.io/anon/pen/zqpJjo

Надеется, что это помогает!