Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.07.2018, 10:31
Аспирант
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 45

Почему после окончания переноса переходит по ссылке
Вот есть код. Не могу понять, почему после окончания переноса элемента он переходит по ссылке взятой из 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-кодер, 14.07.2018 в 10:31. Причина: Теги
Ответить с цитированием
  #2 (permalink)  
Старый 14.07.2018, 10:32
Аспирант
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 45

Проблема ориентировочно тут:
$('.color').bind('dragstart', function(event) {
	    event.originalEvent.dataTransfer.setData('text/plain', event.target.getAttribute('id'));
	    });
Ответить с цитированием
  #3 (permalink)  
Старый 14.07.2018, 10:50
Аспирант
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 45

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

Работает. Но почему проблема в том коде?!
Ответить с цитированием
  #4 (permalink)  
Старый 14.07.2018, 12:51
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,919

В "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).

Последний раз редактировалось Rise, 14.07.2018 в 13:01.
Ответить с цитированием
  #5 (permalink)  
Старый 14.07.2018, 19:00
Аспирант
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 45

спасибо. пошаманю
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему может не работать mouseover после метода post/get vuler Общие вопросы Javascript 1 22.02.2012 11:28
Переход на страницу после окончания проигрывания bohdantheone Общие вопросы Javascript 7 03.12.2011 04:59
Выполнить функцию после окончания всей анимации De-Luxis jQuery 2 24.11.2011 15:11
Почему скрипт срабатывает только после обновления страницы? Randomizer jQuery 2 01.09.2010 18:01
переход по ссылке только после нескольких кликов по ней smilexpo Events/DOM/Window 8 24.11.2009 15:57