Пример перетаскивания W3School не работает в JSFiddle

Question

Пример перетаскивания W3School не работает в JSFiddle

0

Я хочу добавить функции перетаскивания и перетаскивания на веб-сайт. Я все еще узнаю об этом и хочу реализовать прототип, прежде чем добавлять его на свой сайт.

Я нашел пример W3Schools, и он отлично работает на своем веб-сайте.

Я попытался переместить этот пример в JSFiddle, чтобы поиграть с ним. К сожалению, этот пример не работает там. Кто-нибудь знает, в чем проблема?

HTML

<body>
<p>Drag image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <img id="drag1" src="http://iconbug.com/data/29/128/1cc6b61217921b624db0cd6cfd6d1360.png" draggable="true" ondragstart="drag(event)" />

</body>

Javascript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

Мне пришлось использовать изображение, доступное из общедоступного URL. Я также добавил закрытие / к тегу img.

PS: Я хочу как можно больше избегать JQuery.

Jérôme Verstrynge 02 окт. 2013, в 11:12

Источник

0

Почему я не удивлен? W3Schools - ужасный ресурс для изучения веб-разработки, попробуйте MDN .
Pavlo 02 окт. 2013, в 08:21
0

измените no wrap-body в настройках скрипки, это работает (как на сайте) здесь jsfiddle.net/vinodlouis/zx8Ty
Vinod Louis 02 окт. 2013, в 08:22
0

Спасибо Винод. Если вы создадите ответ, я его одобрю!
Jérôme Verstrynge 02 окт. 2013, в 08:24

Показать ещё 1 комментарий

Теги:

javascript

html

drag-and-drop

2 ответа

0

Это проблема включения javascript.

В Framework и расширения попробуйте установить второе раскрывающееся No wrap - in <head>

Работал для меня.

dorianm 02 окт. 2013, в 06:40

Ещё вопросы

Почему я не удивлен? W3Schools - ужасный ресурс для изучения веб-разработки, попробуйте MDN .
измените no wrap-body в настройках скрипки, это работает (как на сайте) здесь jsfiddle.net/vinodlouis/zx8Ty
Спасибо Винод. Если вы создадите ответ, я его одобрю!

Vinod Louis · Accepted Answer · 2013-10-02T06-09-00.000Z

измените no wrap-body в скриптах, которые он работает ЗДЕСЬ

function allowDrop(ev) {
ev.preventDefault();
}

function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

Этот код точно такой же, как в вопросе. Похоже, проблема была в самой скрипке. Не могли бы вы расширить?