Форум

Начинающий-Js-кодер · #1 (**permalink**) 14.07.2018, 10:31

Вот есть код. Не могу понять, почему после окончания переноса элемента он переходит по ссылке взятой из id элемента. как можно исправить? Спасибо.

<!DOCTYPE html>

<html>
<head>
    <title>Dragdrop</title>
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>

<body>
<style>
    .color {
  width: 100px;
  height: 50px;
  border: dotted 1px black;
  margin: 5px;
}

.color-target {
  width: 100px;
  height: 50px;
  border: dotted 1px black;
  margin: 5px;
}

#r {
  background-color: red;
}
#o {
  background-color: orange;
}
#y {
  background-color: yellow;
}
#g {
  background-color: green;
}
#b {
  background-color: blue;
}
#i {
  background-color: indigo;
}
#v {
  background-color: violet;
}
</style>
Drag from here...
<div class="color" id="r" draggable="true"></div>
<div class="color" id="o" draggable="true"></div>
<div class="color" id="y" draggable="true"></div>
<div class="color" id="g" draggable="true"></div>
<div class="color" id="b" draggable="true"></div>
<div class="color" id="i" draggable="true"></div>
<div class="color" id="v" draggable="true"></div>

To here...
<div class="color-target"></div>
<div class="color-target"></div>
<script>
$(document).ready(function() {
    $('.color').bind('dragstart', function(event) {
	event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id'));
    });

    $('.color-target, .color').bind('dragover', function(event) {
        event.preventDefault();
    });

    $('.color-target').bind('drop', function(event) {
        var src = event.originalEvent.dataTransfer.getData("text/plain");
        var bc = $('#' + src).css('background-color');
        $(this).css('background-color', bc);
    });

    $('.color').bind('drop', function(event) {
        var src = event.originalEvent.dataTransfer.getData("text/plain");
        swapNodes(document.getElementById(src), this);
    });

    function swapNodes(a, b) {
        var aparent= a.parentNode;
        var asibling= a.nextSibling===b? a : a.nextSibling;
        b.parentNode.insertBefore(a, b);
        aparent.insertBefore(b, asibling);
  }
});

</script>
</body>
</html>

Начинающий-Js-кодер · #2 (**permalink**) 14.07.2018, 10:32

Проблема ориентировочно тут:

$('.color').bind('dragstart', function(event) {
	    event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id'));
	    });

Начинающий-Js-кодер · #3 (**permalink**) 14.07.2018, 10:50

Сделал так:

$(".color").draggable({
  revert:true
});
$(".door").droppable({
  drop: function(e, ui) {
    console.log(ui.draggable)
    $(this).css("background-color", ui.draggable.attr("id"));
  }
});

Работает. Но почему проблема в том коде?!

Rise · #4 (**permalink**) 14.07.2018, 12:51

В "drop" нужен event.preventDefault() в начале, "переход по ссылке" в данном случае это действие по умолчанию, его нужно предотвратить. Не по теме, "text/plain" в dataTransfer, у меня в IE не работал, пришлось заменить на "text", метод "bind" уже морально устарел, c версии 1.7 используют "on". Необходимый минимум на чистом JS, чтобы Drag&Drop работал, такой:

dragElement.draggable = true; // или атрибут draggable="true"

dragElement.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text', ''); // Firefox
    // ...
});

dropElement.addEventListener('dragover', function (e) {
    e.preventDefault();
    // ...
});

dropElement.addEventListener('drop', function (e) {
    e.preventDefault();
    // ...
});

Пример с дополнительными событиями здесь, кроме "drag" (постоянно вызывается пока двигаешься) и "dragexit" (у меня нигде не работал кроме Firefox).

Начинающий-Js-кодер · #5 (**permalink**) 14.07.2018, 19:00

спасибо. пошаманю

Форум

Справочник

Discord чат

Курсы javascript