"Master the art of drag and drop in Dojo: Implementing a handler for the drop

My list is structured as follows:

<div dojoType="dojo.dnd.Source" id="myList">
    <div class="dojoDndItem">item 1</div>
    <div class="dojoDndItem">item 2</div>
    <div class="dojoDndItem">item 3</div>
</div>

The list is made sortable using the dojo attributes.

While it all works seamlessly, I am looking to add a listener for when an item is dropped. When the user releases the mouse and the element snaps into place, I want to trigger a javascript function to handle this event. Is there a way to accomplish this through markup?

javascriptdrag-and-dropdojo

Answer №1

If you're looking to customize the behavior of the onDrop method in the Source extension point, you can achieve this declaratively using the <script type="dojo/..."> syntax that is understood by the parser. An example of how to do this is shown below:

<div dojoType="dojo.dnd.Source" id="myList">
    <script type="dojo/connect" event="onDrop" args="source, nodes, copy">
        console.log('received drop event:', source, nodes, copy);
    </script>
    <div class="dojoDndItem">item 1</div>
    <div class="dojoDndItem">item 2</div>
    <div class="dojoDndItem">item 3</div>
</div>

It's important to note that I am using a connect statement to access the functionality within the onDrop method of dojo.dnd.Source. If you were to override the function directly using 

<script type="dojo/method">
, you would lose the default functionality provided by the method and its associated functions.

To learn more about this feature and how it can be used with the parser, check out the SitePen Blog post linked here:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The essential guide to creating a top-notch design system with Material UI

Our company is currently focusing on developing our design system as a package that can be easily installed in multiple projects. While the process of building the package is successful, we are facing an issue once it is installed and something is imported ...

javascripttypescriptmaterial-uies6-modulesparcel

Using JQuery, a button is programmed to take a URL and then proceed to submit

My application is designed to shorten URLs for users who are authenticated. The form only requires the full URL input, and it will then generate a shortened version of the link. I am interested in creating a button that can be embedded on pages with long, ...

javascriptphpjqueryajaxforms

Python web application encountering issues running in browser

After successfully creating a Python desktop application with Tkinter library, we decided to convert it into a web app using pyjamas. The conversion process generated html files and javascripts as expected. However, when attempting to open the html file i ...

javascriptpython-2.7web-applicationstkinterpyjamas

Trigger a pop-up alert box when the jQuery event $(document).ready is fired within a Smarty template

I'm currently attempting to make a popup message display when the document is fully loaded. Although I have successfully integrated Google Maps on another page, this task seems to be more challenging. Below is the code snippet: <html> < ...

javascriptjquerysmarty

Is it possible to trigger multiple button clicks using JQuery simultaneously?

Hello everyone, I am new to StackOverflow and this is my first question here. I hope it's not too silly. Thank you in advance for your help! I am trying to achieve a functionality where one button click triggers the clicks of multiple other buttons u ...

javascriptc#htmljquerycallback

Alignment issue with procedural plane vertices in threeJS

In my project, I am utilizing threeJS along with a Simplex noise algorithm to create a tile system consisting of 50x50 planes. Currently, I am iterating through x+y and adding each plane. The Simplex noise algorithm is then used to calculate the z position ...

javascriptthree.jsverticesprocedural-generationsimplex-noise

Dependency of multiple objects in Webgl three.js

I'm struggling with object dependencies and need help. I want to create a setup where one object is dependent on two other objects. Essentially, when I modify the position of one parent object (like changing the y-Position), the dependent object (chil ...

javascriptthree.jsparent-child

What is the best way to transfer form data to another function without causing a page refresh?

Currently, I am in the process of developing a series of web applications using REACT JS. One specific app I am working on involves a modal that appears upon a state change and contains a form where users can input their name along with some related data. ...

javascriptreactjs

I'm encountering an issue with numbers that contain comma decimal separators

My current script is designed to calculate the amount of water saved by a shower column. However, I have encountered issues with its functionality in Firefox and Edge when switching between using "," and "." for values interchangeably. I have attempted va ...

javascriptjquerymath

Despite my usage of className, I still encounter the error message "Error: Invalid DOM property `class`."

I am having trouble debugging this issue as I am unsure of the exact location of the error. Here is the link to the repository: https://github.com/kstaver/React-Portfolio Error #2. There are three more promise rejection errors present, which I will addres ...

javascripthtmlcssnode.jsreactjs

What is the best way to transfer React context between _document.js and pages in Next.js?

Imagine I have this scenario: export const ThemeContext = createContext(); export function ThemeWrapper({ children }) { const sharedState = { darkMode: false, }; return ( <ThemeContext.Provider value={sharedState}> {children} ...

javascriptreactjsnext.jstailwind-css

"Troubleshooting issue with jQuery failing to identify PHP variable within an if

I have managed to implement a code that utilizes jQuery and PHP session to add items to the cart. Everything is working smoothly except for displaying the status of the action, such as "Added to cart" or "Updated". The message about the status is stored in ...

javascriptphpjquery

`The console is displaying incorrect results when returning a JSON object`

Need to extract the full address as well as the lat and long values from the provided JSON data. var place = { "address_components": [{ "long_name": "17", "short_name": "17", "types": [ "street_number" ] }, ... ...

javascriptjqueryjsongoogle-maps

What is the most effective way to populate an element using jQuery?

When you click a button with jQuery, I am generating a modal (Bootstrap modal) as a string. This modal has two option classes: Call Today and Call Tomorrow, which seems fine so far. Upon clicking the button, the modal is created, prompting me to add two a ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display a blade modal upon clicking a Vuejs button

I am working on a Laravel Vue application where I need to display user records using a datatable implemented in Vue. Above the datatable, there is a button that allows users to add new records. When a user clicks on the add button, it should trigger the ...

javascriptphplaravelvue.js

Transitioning from using lerna to adopting pnpm

We are in the process of transitioning our project from Lerna to PNPM and we currently have a script that we run. Here are the commands: "postinstall": "npm run bootstrap" "bootstrap": "lerna bootstrap --hoist", &quo ...

javascriptnpmlernapnpmpnpm-workspace

What is the best way to retrieve the ID of a post request using React's axios hook?

My goal is to make a post request to create an app, and then establish its links. To achieve this, I need to obtain the id of the newly created items in order to create the links. Is there a way to retrieve the id of the item created through the post reque ...

javascriptreactjsaxiosreact-hooks

The functionality of the jQuery click event is not functioning properly

I encountered a strange issue where the code below works perfectly fine when directly pasted into the browser (chrome console). However, it does not work when executed from my source file. <script type="text/javascript" > $(".test").click( ...

javascriptjqueryhtmlcss

When I try to run "npm start" with node-webkit, it seems like the script specified in my package.json manifest file is not being

After running npm start in the terminal, I encountered the following error message: PS C:\Users\finsa\OneDrive\Documents\UNI\Web Development\NS_Music_App> npm start > <a href="/cdn-cgi/l/email-protection" class= ...

javascriptnode.jsnpmnode-webkit

Using JavaScript to parse JSON data generated by PHP using an echo statement may result in an error, while

I am facing an issue with parsing a JSON string retrieved from PHP when the page loads. It's strange that if I send an AJAX request to the same function, the parsing is successful without any errors. The problem arises when I attempt to do this: JSON ...

javascriptjsonajax