Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.08.2016, 16:51
Интересующийся
Отправить личное сообщение для кирикала Посмотреть профиль Найти все сообщения от кирикала
 
Регистрация: 03.08.2016
Сообщений: 21

Drag n Drop boxes
Здравствуйте люди,
такого рода вопрос...
есть две области предположим например
первая 50px на 100px (пустая)
вторая 150px на 50px (в ней три елемента по 50px на 50px картинки) например boxA boxB boxC итого как раз 150px на 50pх
пишу код чтобы можно было их перетаскивать в первую область
не могу понять как сделать так чтобы они не накладывались друг на друга (ну тоесть чтобы влазило в первую область так как задано по размеру - две картинки) вот код

HTML
<div id="skovor"></div>
<div id="big" ondragenter="return dragEnter(event)"
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)"></div>
<section id="section"  ondragenter="return dragEnter(event)" 
     ondrop="return dragDrop(event)" 
     ondragover="return dragOver(event)">
<div class="drag" id="boxA" draggable="true" ondragstart="return dragStart(event)"></div>
<div class="drag" id="boxB" draggable="true" ondragstart="return dragStart(event)"></div>
<div class="drag" id="boxC" draggable="true" ondragstart="return dragStart(event)"></div>
<br>

</section>


JS
function dragStart(ev) {
   ev.dataTransfer.effectAllowed='move';
   ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
   ev.dataTransfer.setDragImage(ev.target,100,100);
   return true;
}
function dragEnter(ev) {
   event.preventDefault();
   return true;
}
function dragOver(ev) {
     event.preventDefault();
}
function dragDrop(ev) {
   var data = ev.dataTransfer.getData("Text");
   ev.target.appendChild(document.getElementById(data));
   ev.stopPropagation();
   return false;
}


СSS
Код:
.drag {
  width: 150px;
  height: 150px;
  background-size: cover;
  display: inline-block;
  margin-right: 10px;
}
#boxA{
  margin-right: 0px;
  background-image: url(1.png) ;
}
#boxB{
  margin-right: 0px;
  background-image: url(2.png) ;
}
#boxC{
  margin-right: 0px;
  background-image: url(3.png) ;
}
#big {
  width: 150px;
  height: 300px;
  margin: 100px;
}
#skovor{
  position:absolute;
  z-index: -10;
  margin: -60px 0 0 -20px;
  width: 675px;
  height: 400px;
  background-image: url(5.png) ;
  background-size: cover;
}
section {
  width: 715px;
  height: 200px;
  margin: 20px;
}
короче сделать так чтоб в область влазило из трех только два елемента а то третий если перетащить он поверх первого нагло накладывается(

Последний раз редактировалось кирикала, 28.08.2016 в 16:54.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ищу Drag & drop плагин для построения плана помещения Den Brown Элементы интерфейса 0 31.07.2015 19:23
Drag and Drop, Grids, MVC Pro100tom Элементы интерфейса 0 25.07.2013 12:05
drag & drop , html 5 cyber Events/DOM/Window 1 30.06.2012 15:16
Помогите с drag and drop shtopor jQuery 1 20.02.2012 13:26
Drag & Drop с несколькими элементами Katz Общие вопросы Javascript 1 29.07.2011 13:01