How to solve drag and drop in DukeScript?

Question

How to solve drag and drop in DukeScript?

107 Views Asked by user3435407 At 20 October 2024 at 20:18

The goal is that if you drag the picture from one section (#rightbox) to the another one (#leftbox) and you drop it, then a text appears in a text field.

My HTML until now:

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

This is not working... However, if I replace the event 'drop' with 'mouseover', then if I move the mouse over the zone of #leftbox, then the function 'writeText' will be triggered.

Why is the dropping not triggering the function? (bonus question, if the events are called on..something.., then why do we have to use for example instead of 'onmouseover' only 'mouseover')

Many thanks!

Original Q&A

There are 1 best solutions below

**ebaharilikult** · Accepted Answer

The simple solution would be to add "ondragover="event.preventDefault()"" in your #leftbox. Then it should work:

My reproduced but not perfect solution:

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

How to solve drag and drop in DukeScript?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DUKESCRIPT

Trending Questions

Popular # Hahtags

Popular Questions