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>

这不起作用...... 但是，如果我用'mouseover'替换事件'drop'，那么如果我将鼠标移到#leftbox的区域上，那么将触发函数'writeText'。

为什么丢弃不会触发该功能？（奖金问题，如果事件被称为......某事......那么为什么我们必须使用例如'onmouseover'而'只有'鼠标悬停'）

非常感谢！

Answer 1

简单的解决方案是添加＆＃34; ondragover =＆＃34; event.preventDefault（）＆＃34;＆＃34;在你的#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>

如何解决DukeScript中的拖放问题？

1 个答案: