Почему после окончания переноса переходит по ссылке
Вот есть код. Не могу понять, почему после окончания переноса элемента он переходит по ссылке взятой из 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> |
Проблема ориентировочно тут:
$('.color').bind('dragstart', function(event) { event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id')); }); |
Сделал так:
$(".color").draggable({ revert:true }); $(".door").droppable({ drop: function(e, ui) { console.log(ui.draggable) $(this).css("background-color", ui.draggable.attr("id")); } }); Работает. Но почему проблема в том коде?! |
В "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). |
спасибо. пошаманю
|
Часовой пояс GMT +3, время: 23:12. |