DukeScript 中如何解决拖放问题？

Question

我们的目标是，如果您将图片从一个部分 (#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' 将被触发。

为什么掉落没有触发该功能？（额外的问题，如果事件是在..something..上调用的，那么为什么我们必须使用例如 'onmouseover' 而不是 'mouseover'）

非常感谢！

Answer 1

简单的解决方案是在您的#leftbox 中添加"ondragover="event.preventDefault()""。然后它应该工作：

我转载但不完美的解决方案：

<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>

DukeScript 中如何解决拖放问题？

How to solve drag and drop in DukeScript?

javascript

dukescript