目标是，如果将图片从一个部分 (#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”函数。
为什么掉落没有触发该功能？ (额外的问题，如果事件被调用......某事......，那么为什么我们必须使用例如'mouseover'而不是'onmouseover')
非常感谢!
最佳答案
简单的解决方案是在 #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>
关于javascript - 如何解决DukeScript中的拖放问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32312289/