Steps to drag, drop, and maintain the element's position for a period of time with JavaScript

I have been working on automating my Salesforce application using Selenium and incorporating JavaScript for drag and drop functionality. However, I am facing an issue where the element I drop onto the target ends up being positioned elsewhere. Manually holding the element on the target for a few seconds seems to correct this problem. Is there a way to include code that will hold the element on the target for a specific duration?

Below is the code snippet that successfully handles drag and drop actions for me. How can I modify it to ensure the source element is held on the target?

final String java_script =
    var src=arguments[0],tgt=arguments[1];
    var dataTransfer={dropEffect:'',effectAllowed:'all',files:[],items:{},types:[],setData:function(format,data){this.items[format]=data;this.types.append(format);},getData:function(format){return this.items[format];},clearData:function(format){}};
    var emit=function(event,target){
        var evt=document.createEvent('Event');
        evt.initEvent(event,true,false);
        evt.dataTransfer=dataTransfer;
        target.dispatchEvent(evt);
    };
    emit('dragstart',src);
    emit('dragenter',tgt);
    emit('dragover',tgt);
    emit('drop',tgt);
    emit('dragend',src);
    emit('dragleave' , src);

((JavascriptExecutor)driver).executeScript(java_script, src, tgt);

Thank you in advance for any assistance!

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

JavaScript Variable Naming ConventionEnsuring correct spelling in variable names is essential

While I may not be a JavaScript expert, I have a question about its dynamically typed nature. We are all aware that JavaScript (node.js) is a dynamically typed language where we can easily assign values like: someObject.attr = 123; However, due to the la ...

I'm having trouble passing the variable value, what steps can I take to resolve this issue?

Here is the code snippet I am currently working with: I am having an issue with passing the value of selectedLang to a page. It always shows 0 instead of the updated value. Can someone please review my code and provide some advice on what I might be missi ...

Set restrictions on the element with a fixed position

My div has a position: fixed that scrolls correctly, but I want it to stop when it reaches specific y-axis boundaries. How can I achieve this without flickering and maintaining performance? The behavior of Twitter's right panel is similar to what I&ap ...

Troubleshooting and Fixing AJAX Calls

When working with Asynchronous JavaScript, it is common to encounter issues where we are unsure of the posted request and received response. Is there a simple method for debugging AJAX requests? ...

Exploring the capabilities of ShadCN Select using Jest and React Testing Library

I am currently working with a customized ShadCN Select component which I transformed into a more versatile CustomSelect component for better reuse. My main focus now is on testing the click function of the options and confirming the text content displayed ...

JavaScript functionality malfunctions once jQuery AJAX has finished loading on the main document

Looking for assistance with a top-bottom view scenario where I am attempting to upload an image in a target iFrame using a validated form with jQuery-validate. The iFrame's PHP script handles the image upload and then reloads the parent document to re ...

Exploring the possibilities with Angular.js and Protractor.js

Currently, I am making my way through a book titled "AngularJS UI Development" by PackT. Everything has been smooth sailing until I reached the Selenium/Protractor section on page 26 out of 235. Despite trying various solutions found on Stack Overflow, non ...

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

Dynamic Character Measurement

I am currently utilizing Datatables to dynamically add rows to a table with 3 columns: Index Text CharCount I am seeking logic to implement a character count for each entry in the 'Text' column and display it in the corresponding 'CharCou ...

Selenium: Extracting text from a website is yielding incorrect results

Currently, I have developed a Selenium script that launches a web browser, navigates to Google Shopping, searches for a product using its EAN, goes to the comparison section, takes a screenshot of the page, and saves it. However, I am now trying to modify ...

Adding dynamic values to nested form groups in Angular Form Array

After following a tutorial on creating a reactive form in an Angular application, I managed to implement it successfully. However, I encountered an issue when trying to add an additional control called "setNumber" to the form array. I want this control to ...

Execute function periodically using Vue.js

I have a requirement to update data periodically by calling a function in my Vue.js application. I am looking to call the 'listar()' method every 30 seconds and store the response in a property of vue js. If anyone can guide me on where to locat ...

`Steps to overcome cross-domain issues when using AJAX`

I am trying to tackle the issue of AJAX cross-domain errors. The specific error message I encounter in Chrome is as follows: XMLHttpRequest cannot load http://'myaddress'/TEST/user/login/testuserid . Request header field Access-Control-Allow-O ...

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

What is the reason behind having a selectedOptions property rather than just a selectedOption?

Why does the selectedOptions property of select return an HTMLCollection instead of just one HTMLOptionElement? As far as I understand (correct me if I'm wrong), a select element can only have one selected option, so why do I always need to access it ...

Is it feasible to embed Instagram in an iframe without using the API?

Is there an alternative method to embed Instagram using iframe without the need for an API? ...

jQuery AJAX Triggered Only Once in Callback Function

I am facing an issue with the jQuery get function within my updateMyApps. The function works fine when called directly after it is declared. It successfully loops through the data and appends elements to the DOM. However, when I submit the form #addapplic ...

What is the best way to activate Bootstrap's tooltip functionality following its inclusion via AJAX?

One of the features I am adding to my website using ajax is a tooltip. The snippet looks like this: <a href="#" data-toggle="tooltip" title data-original-title="My tooltip text...">Hover me...</a> To get it to work, I need to initialize it as ...

The functionality of "Expectedconditions.not" in Selenium Webdriver is not performing as anticipated

WebDriverWait wait = new WebDriverWait(driver, 60) WebElement element = driver.findElement(By.xpath("//div[contains(text(),'Loading...')]")); System.out.println("Test"); wait.until(ExpectedConditions.not(ExpectedConditions.presenceOfElementLocat ...

Utilizing HTML to call a function and fetching data from AngularJS

I've been struggling to retrieve the value after calling a function in my HTML file. Despite trying various methods after conducting research, I have not achieved success yet. Take a look at the code below: HTML: <div class="form-group"> & ...