0

В общем, проблема такая. У меня есть несколько div блоков подряд, по вертикале. Я сделал так, чтобы их можно было менять местами, всё работает на ура.

Но у меня появилась следующая проблема. Внутри этого div элемента находится p, и если ухватиться не по самому объекту при перетаскиванию а за этот текст - произойдёт херня).

function ondragstartT(ev) {

  ev.dataTransfer.setData("id", ev.target.id);
  ev.target.classList.add('dragging');
}

function ondragoverT(ev) {
  let old = document.querySelector('.over');
  old && old.classList.remove('over');
  ev.target.classList.add('over');
  ev.preventDefault();
}

function ondropT(ev) {
  var rang_old = document.querySelector('.dragging').getAttribute('id');
  var rang_new = document.querySelector('.over').getAttribute('id');

  let old = document.querySelector('.dragging');
  old && old.classList.remove('dragging')
  old = document.querySelector('.over');
  old && old.classList.remove('over');
  let v = ev.target.innerHTML;
  let fromEl = document.querySelector('#' + ev.dataTransfer.getData('id'));

  ev.target.innerHTML = fromEl.innerHTML;
  fromEl.innerHTML = v;

}
.container-center-control {
  width: 48%;
  min-height: 100vh;
  margin: auto;
  margin-top: 76px;
}

.container-list-role {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e7e8ec;
}

.header-control {
  width: 100%;
  height: 40px;
  background-color: #F5F5F5;
  border-bottom: 1px double #e7e8ec;
}

.header-control p {
  line-height: 40px;
  font-size: 1.0em;
  font-weight: bold;
  color: #455b65;
  float: left;
  margin: 0;
  margin-left: 40px;
}

.block-role {
  width: 100%;
  height: 60px;
  cursor: pointer;
  background-color: white;
  border-bottom: 1px double #BAC0C3;
  transition: 100ms;
  text-align: center;
  line-height: 60px;
}

.block-role:hover {
  background-color: #eff2f5;
}

.dragging {
  opacity: 0.5;
}

.over {
  border: solid #C1C1C1;
}

.block-role p {
  line-height: 60px;
  font-size: 1.0em;
  color: #455b65;
  float: left;
  margin: 0;
  margin-left: 40px;
}
<div class="container-center-control">
  <div class="container-list-role">
    <div class="header-control">
      <p>Список ролей</p>
    </div>
    <div class="div-block-role" ondrop="ondropT(event);" ondragover="ondragoverT(event);">
      <div class="block-role" id="c1" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест1</p>
      </div>
      <div class="block-role" id="c2" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест2</p>
      </div>
      <div class="block-role" id="c3" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест3</p>
      </div>
      <div class="block-role" id="c4" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест4</p>
      </div>
    </div>


Вот код ещё сюда залил, чтобы было легче

https://vk.cc/as4AmE

2
  • Нужно сделать проверку, если таргет - параграф, то берем его родителя.
    – user355286
    1 апр 2020 в 18:27
  • Как сделать то это, брат?)
    – YouMixx
    1 апр 2020 в 18:29

1 ответ 1

3

function ondragstartT(ev) {

  ev.dataTransfer.setData("id", ev.currentTarget.id);
  ev.currentTarget.classList.add('dragging');
}

function ondragoverT(ev) {
  var target = getRightTarget(ev.target)
  
  let old = document.querySelector('.over');
  old && old.classList.remove('over');
  target.classList.add('over');
  ev.preventDefault();
}

function ondropT(ev) {
  var target = getRightTarget(ev.target)
  var rang_old = document.querySelector('.dragging').getAttribute('id');
  var rang_new = document.querySelector('.over').getAttribute('id');

  let old = document.querySelector('.dragging');
  old && old.classList.remove('dragging')
  old = document.querySelector('.over');
  old && old.classList.remove('over');
  let v = target.innerHTML;
  let fromEl = document.querySelector('#' + ev.dataTransfer.getData('id'));

  target.innerHTML = fromEl.innerHTML;
  fromEl.innerHTML = v;
}

function getRightTarget(target) {
  return target.tagName === 'P' ? target.parentNode : target
}
.container-center-control {
  width: 48%;
  min-height: 100vh;
  margin: auto;
  margin-top: 76px;
}

.container-list-role {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e7e8ec;
}

.header-control {
  width: 100%;
  height: 40px;
  background-color: #F5F5F5;
  border-bottom: 1px double #e7e8ec;
}

.header-control p {
  line-height: 40px;
  font-size: 1.0em;
  font-weight: bold;
  color: #455b65;
  float: left;
  margin: 0;
  margin-left: 40px;
}

.block-role {
  width: 100%;
  height: 60px;
  cursor: pointer;
  background-color: white;
  border-bottom: 1px double #BAC0C3;
  transition: 100ms;
  text-align: center;
  line-height: 60px;
}

.block-role:hover {
  background-color: #eff2f5;
}

.dragging {
  opacity: 0.5;
}

.over {
  border: solid #C1C1C1;
}

.block-role p {
  line-height: 60px;
  font-size: 1.0em;
  color: #455b65;
  float: left;
  margin: 0;
  margin-left: 40px;
}
<div class="container-center-control">
  <div class="container-list-role">
    <div class="header-control">
      <p>Список ролей</p>
    </div>
    <div class="div-block-role" ondrop="ondropT(event);" ondragover="ondragoverT(event);">
      <div class="block-role" id="c1" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест1</p>
      </div>
      <div class="block-role" id="c2" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест2</p>
      </div>
      <div class="block-role" id="c3" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест3</p>
      </div>
      <div class="block-role" id="c4" ondragstart="ondragstartT(event);" draggable="true">
        <p>Тест4</p>
      </div>
    </div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.