如何解决在DukeScript拖放

How to solve drag and drop in DukeScript?

本文关键字：DukeScript 拖放 解决 何解决      更新时间：2023-09-26

的目标是，如果你把图片从一个部分(#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')

多谢!

简单的解决方案是添加"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>
相关文章：