Как решить перетаскивание в DukeScript?

Цель состоит в том, чтобы при перетаскивании изображения из одного раздела (#rightbox) в другой (#leftbox) и его удалении, в текстовом поле появляется текст.

Мой HTML до сих пор:

<body>
    <section id="leftbox" data-bind="event: {drop: $root.writeText}">
    </section>
    <section id="rightbox">
        <img id="pic" src="some_path...">
    </section>
    <section id="resultbox">
        <input data-bind="textInput:  message">
        <button type="button" data-bind="click: $root.writeText">Text!</button>
        <button type="button" data-bind="click: $root.reserText">Reset</button>
    </section>
</body>

Это не работает... Однако, если я заменю событие drop на mouseover, то если я наведу указатель мыши на зону #leftbox, будет запущена функция writeText.

Почему сброс не вызывает функцию? (бонусный вопрос, если события вызываются на что-то.., тогда почему мы должны использовать, например, вместо 'onmouseover' только 'mouseover')

Большое спасибо!

Источник

1 ответ

Решение

Простым решением было бы добавить "ondragover="event.preventDefault()"" в ваш #leftbox. Тогда это должно работать:

Мое воспроизведенное, но не идеальное решение:

<section id="rightbox" data-bind="event: {drag: setDragText.bind($data, 'my dragText 1'), dragend: setDragText.bind($data, '')}">
    <img id="pic" draggable="true" src="img src 1">
</section>

<section id="rightbox" data-bind="event: {drag: setDragText.bind($data, 'my dragText 2'), dragend: setDragText.bind($data, '')}">
    <img id="pic"  src="img src 2">
</section>


<section id="leftbox" ondragover="event.preventDefault()" data-bind="event: {drop: setMessageWithDragText}">
    Some section content.
</section>        


<section id="resultbox">
    <input data-bind="textInput:  message">
    <button type="button" data-bind="click: writeStandardMessage.bind($data, 'Nothing dragged!')">Text!</button>
    <button type="button" data-bind="click: resetText">Reset</button>
</section>
Источник
Другие вопросы по тегам