Ways to detect drag event on a CytoscapeJS node (specifically the one directly underneath the cursor/touch)

Currently, I am utilizing Cytoscape JS to develop a web browser-based tool for manipulating graphs. I am encountering an issue related to listening to the drag event of multiple selected nodes.

I have successfully listened to the 'drag' event of nodes using the provided code snippet:

cy.on('drag', 'node', function (e) {
  let draggedNode = e.target
  ...
}

However, the problem arises when I attempt to drag several nodes simultaneously, as the event is triggered individually for each selected node.

My objective is to specifically listen to the drag event of a single node when multiple nodes are selected, focusing only on the node directly being dragged by the user. This means that when dragging multiple selected nodes, the event should only be triggered for the node directly under the user's cursor or finger.

This requirement is akin to the 'grabon', 'freeon' and 'dragfreeon' events available in CytoscapeJS. Unfortunately, there is no 'dragon' event that caters to this specific scenario. I do not wish to listen to drag events for all currently selected nodes, but only for the one currently under the cursor or finger.

I have attempted to extract the cursor position from the passed 'e' parameter in order to perform a test to determine if the cursor is positioned over the triggering node. However, I discovered that the 'position' and 'renderedPosition' attributes were both undefined, thereby hindering my ability to conduct this test.

So, if anyone has insight on how to implement this functionality in JavaScript, I would greatly appreciate your help. Thank you.

javascriptcytoscape.js

Answer №1

Instead of relying on grabon or free to detect the target, consider using custom classes to add and remove specific functionality when listening to drag events for nodes of that class.

The unnecessary item.isNode() check in the code snippet provided can be removed for efficiency.

cy.on('grabon', 'node', (e) => {
    let item = e.target;

    item.addClass('drag-parent');
});

cy.on('free', 'node', (e) => {
    let item = e.target;

    if (item.hasClass('drag-parent')) {
        item.removeClass('drag-parent');
    }
})

cy.on('drag', 'node.drag-parent', (e) => {
    let item = e.target;

    console.warn(item.id());
})

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

Choosing text input after adding a dynamic HTML row can be done by identifying the specific characteristics

I am currently working on a CodeIgniter project where I have implemented a purchase form that allows users to search for spare parts items using autocomplete in an input text field. The initial search functionality is working fine, but when I try to add a ...

javascriptjquery

Using express.js to send multiple post requests to the same url

My website features a login form where users input their information. Upon submission, a post request is made to check the validity of the provided information. If successful, users are redirected back to the login form where they must enter the code sent ...

javascriptnode.jsexpresspost

Changing innerHTML in CoffeeScript

Are there other options instead of using the 'innerHTML' property in CoffeeScript? In JavaScript, you typically write something like this: document.getElementById('element').innerHTML = "blah_blah" Is there a different approach to ac ...

javascriptcoffeescript

Active tab in HTML

In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...

javascripthtmljquerycss

Guide on replacing placeholders in a text with input fields and connecting them with v-model in Vue.js

I am currently working on creating an exam page that features fill in the gap type questions. These questions have placeholders where students need to insert the correct words or phrases. The questions are fetched via an ajax request and consist of simple ...

javascriptvue.js

Converting large numbers (exceeding 53 bits) into a string using JavaScript

I have a REST service that returns JSON. One of the properties in the JSON contains a very large integer, and I need to retrieve it as a string before Javascript messes it up. Is there a way to do this? I attempted to intercept every response using Angular ...

javascriptjsonangular

Nested loops iterating over an array of objects

I am working with a JSON file that contains my data: { "EIC": { "id": "EIC", "text": "Want to do a quick word game?", "replies": ["Sure", "Later"] }, "YMB": { "id": "YMB", "text": "Okay, tomorrow. Cya!", "replies": ["bye Woeb ...

javascriptarraysreactjsloops

Incorporating additional information into the database

When I run the code, I see a table and a button. After entering data in the prompts as instructed, the table does not get updated. I'm unsure why this is happening. Can someone please explain? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

javascripthtmlhtml-table

Transforming precise military time using Angular and Javascript filtering

There are a few times where I find myself liking 01:45 //and 15:00 I believe this time format is HH:MM in military time? While I have come across some advanced functions that can parse sentences and even include seconds like HH:MM:SS, I am looking for a ...

javascriptangularjsdate

Using the "this" keyword in JavaScript to access the "rel"

Take a look at the JSFIDDLE , where you will notice that the rel attribute in the alert is shown as 'undefined' : var ItemTypeArray = $('input[name^=ItemType]:checked').map(function(){ alert(this.id + ' , r= ' + this.rel) ...

javascriptjqueryhtml

The hit detection algorithm seems to be malfunctioning, and the reason behind it is unclear. (Using Javascript/Processing

I am a beginner in game programming and programming in general. In the past, I have created a clone of "Flappy Bird" and some other games using the hit detection algorithm from the Mozilla Developer Network here. Currently, I am facing an issue while tryi ...

javascriptprocessing.js

Guide on automatically filling input text fields with database values when a checkbox is clicked

I need to automate the process of filling in multiple input text fields with values from variables retrieved through a SELECT query when a checkbox is clicked. For instance, if the SELECT query returns the Warehouse Street Address ($WarehouseStreetAddres ...

javascriptphpjquerymysql

What is the best way to interact with Redis without using any external modules?

I am curious about the communication process between the node redis wrapper and the RESP (REdis Serialization Protocol) database. Here is a simple example: const redis = function(uri) { this.client = '' // How do we establish a connection wit ...

javascriptnode.jsnpmredis

When encountering an OR operator, Javascript will cease execution of the remaining conditions

This is a basic JavaScript form-validation I created. All the document.form.*.value references are present on my page, except for the document.form.dasdasdas.value ==''. In the code below, the purpose is to display an error if any of the forms a ...

javascriptformsvalidation

Verify if an array contains a specific string while disregarding any additional letters within that string

Let's say I have a variable: var url = "/login/user"; Along with an array: var x = ["login", "resetpassword", "authenticate"]; My goal is to check if the url string exists within the array. The issue arises because the url contains additional char ...

javascriptarraysangularstring

The Node.js script functions correctly on the first run but encounters failure in subsequent executions

I am in need of a Node.js script that can perform the following tasks: 1 - Trigger when an image is added to a specific S3 bucket. 2 - Generate a thumbnail of that image (360x203 pixels). 3 - Store a copy of the thumbnail in a separate S3 directory. ...

javascriptnode.jsamazon-web-servicesamazon-s3

Understanding how to access POST content in Meteor.js is an important aspect

In my Meteor app, I am trying to retrieve data using POST requests. Here is the code snippet I am using on the server side: __meteor_bootstrap__.app.stack.splice (0, 0, { route: '/input', handle: function(req, res, next) { req.on(' ...

javascriptnode.jspostmeteor

Change the state of items in a React component to either disabled or active depending on the active items list retrieved from the API

Obtained from the API, I have a collection of buttons that are displayed for filtering: For instance: button2 button4 button5 Assuming there are a total of 5 buttons. button1 and button3 are supposed to be in a disabled or inactive state (appearing ...

javascriptreactjslistfilteringuse-state

React Native ScrollView ref issue resolved successfully

I'm trying to automatically scroll to the bottom of a flatlist, so here's what I have: const scrollViewRef = useRef(); //my scroll view <ScrollView ref={scrollViewRef} onContentSizeChange={() => { scrollViewRef.current.scr ...

javascriptreactjstypescriptreact-nativesyntax-error

Tips for customizing the selection tip of a custom cursor using CSS

I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...

javascriptjqueryhtmlcsscursor