Error in Drag and Drop functionality in Dojo 1.6 (Source.xd.js line 8)

http://jsfiddle.net/ykNJ8/

While working on a vanilla implementation from the CDN on localhost, I encountered an issue I can't seem to replicate consistently. It mainly happens when dragging items near the bottom of the list. The dragging tool-tip isn't locking to the mouse as expected; instead, it keeps getting appended to the bottom of the document and won't disappear.

This persistent tool-tip causes problems when trying to use the drag-and-drop functionality repeatedly.

Upon checking the console errors in Chrome and Firebug, I always get the same message:

Chrome:

Uncaught TypeError: Cannot read property 'type' of undefined   Source.xd.js:8 

Firebug:

_a.getItem(_b[i].id) is undefined 
window[(typeof (djConfig)!="undefined"..._4.dnd.AutoSource(_3d,_3c);}});}}};});    Source.xd.js (line 8)

Unfortunately, Internet Explorer's error message wasn't very helpful in resolving this issue.

I would greatly appreciate any assistance! I have created a simplified version of my page on jsfiddle, which you can access here: http://jsfiddle.net/ykNJ8/

Upon testing it, I can confirm that the error occurs within the fiddle environment as well.

Answer №1

After dedicating a significant amount of time, I finally pinpointed the issue you're facing. It appears that the problem arises from the fact that you have initialized two instances of dojo.dnd.Source.

The first instance is created when you specify the dojoType attribute on the div element with id='faq'. The second instance is generated when you call new dojo.dnd.Source(sortID).

This results in having two widgets operating on the same div, leading to conflicts between them.

To resolve this problem, I have provided a fiddle that addresses it by utilizing only the markup-driven widget: http://jsfiddle.net/TtbPh/1/

Don't lose hope in Dojo widgets just yet! While there may be a learning curve involved, once you grasp it thoroughly, you'll find it indispensable and wonder how you managed without it before :)

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

Unable to access the contents of an array (React JS)

After fetching the content as an array and viewing its contents with console.log, I noticed that despite the array being populated, it has a length of 0, making it impossible to retrieve its elements using map. What could be causing this issue? https://i. ...

Click on the button without any reaction

I'm having trouble with the button. When I click on the button with ng-click="goSearchTitle()", nothing happens. Any idea why it's not working? <body ng-app="myapp"> <div ng-contoller="searchbyTitle"> <h3>Sea ...

Exploring React's State Management with useState

Having some trouble with my introductory React Use State practice, specifically when trying to implement a counter and a button for generating random user numbers Check out the code below: import React, { useState } from 'react' import './A ...

The feature for sending posts in Angular.js appears to be malfunctioning

I have developed a rest-API for adding todos in a MongoDB database. When I use Postman with the setup below, I can successfully save instances: http://localhost:3000/api/addtodo x-www-form-urlencoded with values text="Test", completed: "false". However, ...

Discover properties of a TypeScript class with an existing object

I am currently working on a project where I need to extract all the properties of a class from an object that is created as an instance of this class. My goal is to create a versatile admin page that can be used for any entity that is associated with it. ...

When the server reloads, an error occurs stating 'CodeMirror' is not defined when using CodeMirror with Vuejs/Nuxtjs

I've integrated CodeMirror into one of the textarea elements in my Nuxtjs/Vuejs application. I want to format the textarea to resemble XML. While the CodeMirror functions correctly at times, I encounter an error when reloading the page: Test.vue 33:1 ...

The Node.js microservice encountered a timeout when attempting to connect with another microservice

My issue involves hosting microservices on an ec2 instance. The services work perfectly in the development environment, but encounter a problem when running on the production environment using HTTPS. One of the services is unable to connect to another serv ...

Resizing a ThreeJs object based on the size of another object

I am currently utilizing threejs to display various models in gltf/glb format. These models vary in size, with some being large and others small. My goal is to standardize the size of all these models. If I were to use mesh.scale(), it would only scale th ...

Retrieve a selection of data from the data.json file and mix it up

My webpage has a json data sheet containing multiple objects that I am currently showcasing. { "objects": [ ... ] } In terms of templating: $(function () { $.getJSON('data.json', function(data) { var template = $('#objectstpl') ...

Obtain the "CSwitch" value within the CoreUi React framework

I am trying to figure out how to retrieve the value of a component called "CSwitch" <CSwitch name={element.Field} color={'primary'} variant='opposite' shape='pill' onChange={e => console.log(e.t ...

Is it recommended to employ cluster connection within my Redis client when utilizing Azure Redis Cluster?

It seems that the Azure documentation on clustering can be a bit confusing. According to the docs: Will my client application need any modifications to support clustering? Once clustering is activated, only database 0 will be accessible. If your client ...

Unable to locate the variable named StyleSheet

I've been delving into React Native using this informative site https://www.tutorialspoint.com/react_native/react_native_animations.htm However, I encountered a setback when attempting to launch the app on my iPhone. An error message indicates that a ...

Loading Sequence in Three.js

I'm facing an issue with my Three.js Json-Loader. I have a set of objects whose paths are stored in an array. My goal is to load them and organize them into a list for easy selection. However, the order in which they load differs from their arrangemen ...

Unconventional way of assigning class properties in Typescript (Javascript): '?='

Recently, I came across the ?= assignment expression within a class property declaration. Can anyone provide some insight into what this means? I am familiar with the new Optional Chaining feature (object?.prop), but this particular syntax is unfamiliar t ...

Steps to create a toggle click event

I've been attempting to create a toggle click event using the code below: HTML <a class="load" data-gallery="123456" style="cursor: pointer;"><h2><p>example</p></h2></a> <div id="123456"> </div> j ...

v-show is not functioning properly

After clicking the button, I notice that even though the array shows[] changes (as indicated by Vue's chrome plugin), the character 'a' remains on the page. However, characters 'b' and 'c' do not appear at all. ...

attempting to utilize jQuery to call a controller method, but encountering an issue where the method is failing to

In one of my pages, called "GetData.cshtml", I have a requirement to input data into some textboxes and send it to a controller method using jQuery. Here is the code snippet: //GetData.cshtml $(document).ready(function () { $('#btn_sbmt_recommenda ...

What is the process for including a new item in a JavaScript dictionary?

I'm currently learning JavaScript and I've encountered a challenge. I have a dictionary that I'd like to update whenever a button is clicked and the user enters some data in a prompt. However, for some reason, I am unable to successfully upd ...

Discovering a Match within a JavaScript Object and Array with the help of Jquery's Each

I am currently working on implementing an array of filters to search through a JavaScript object containing store locations. My goal is to find a full match using both filters from the filters array, which currently has 2 items but will eventually have mor ...

What is the best way to handle multiple responses in Ajax within a single function?

Here is a simple code snippet: $.ajax({ url:'action.php', method: 'POST', data:{getcart:1}, success:function(response){ $('#getcart').html(response);//want to ...