Learn how to leverage the jQuery Draggable plugin to easily create draggable elements and initiate dragging using the HTML5 native Drag and Drop

Question

Learn how to leverage the jQuery Draggable plugin to easily create draggable elements and initiate dragging using the HTML5 native Drag and Drop

My goal is to create a unique functionality using the HTML5 Drag And Drop API and jQuery. I want to trigger a dragover event, then have a jQuery draggable object follow the mouse until the dragend event occurs.

The reason for this is that I am working on an application that relies on the jQuery.ui draggable feature for a specific plugin (FullCalendar Scheduler v3). I aim to enhance the application by allowing users to drag and drop items from one browser window to another within the mentioned plugin.

Since the plugin does not support the native HTML5 Drag and Drop API and jQuery.ui draggable cannot handle cross-window dragging, my solution involves combining these two plugins.

My proposed approach is to utilize the HTML5 Drag and Drop API to create a new draggable element in the target browser window when a dragged item enters a dropzone. By simulating a mousedown event on the new draggable element, it will track the cursor's movement. Upon triggering the dragend event, I plan to simulate a mouseup event on the draggable element, enabling the scheduler plugin to function accordingly.

To test this method initially with a single browser window, I attempted to implement the first part of my solution: creating a jQuery.ui draggable element and initiating its movement via a simulated mousedown event during a dragover event. However, I encountered difficulties achieving the desired behavior.

I provided a fiddle showcasing my attempts thus far (full code not included here): JSFiddle

Unfortunately, I encountered a type.indexOf is not a function error while testing both options in the Fiddle.

I sought assistance on a related question where a solution was proposed for starting the drag operation with a click event, but other event types did not yield the same result. It seems a mousedown.draggable event can only be simulated from a MouseEvent, which the dragend event is not.

In essence, I require guidance to successfully implement the intended functionality, especially for the initial phase of my proposed solution!

javascript jquery-ui html5-draggable

Answer 1

Answer №1

Finding a solution for this issue seems to be quite complex. The inconsistency in DnD terminology and functionality across different browsers adds another layer of difficulty. For example, FireFox triggers a dragenter event upon drop, while Chrome fails to detect a drop event from objects originating from another window.

In my attempt to address this problem, I conducted some testing. To replicate the scenario, I suggest copying the content into a Text file and saving it as HTM or HTML. Then, proceed to open the file locally in your browser. Next, open another window and access the second HTM file. By following these steps, you should have two windows where dragging elements between them is possible.

wina-1.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Window A</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  .items {
    position: relative;
  }
  .items > div {
    margin-right: 5px;
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border-radius: 6px;
    display: inline-block;
  }
  #log {
    width: 100%;
    height: 5em;
    overflow-y: auto;
  }
  [draggable].idle {
    background-color: rgba(255,0,0,0.75); 
  }
  [draggable].selected {
    background-color: rgba(255,0,0,0.95);
  }
  </style>
</head>
...
...

<p>The use of raw JavaScript is emphasized in this setup. While experimenting with jQuery UI, retaining the stylesheet was done for simplified theming purposes. Notably, there are sections allocated for logging details, draggable elements, and static items within the setup.</p>

<p><strong>winb-1.htm</strong></p>
...
...

<p>jQuery was incorporated in Window B with an intent to enhance the element's functionality by transforming it into a jQuery UI Draggable entity.</p>

<p>One crucial aspect to bear in mind is the limitation on alterations during transit. Since the source element remains detached from the target DOM, modifications cannot occur en route. Instead, initializing a new draggable element is advised within the <code>drop event, creating a fresh item assigned with all relevant data at that point.

Additionally, considering the unreliability of data transfer, utilizing localStorage over DataTransfer may prove more efficient and dependable. This method mirrors a cookie-like behavior, boasting higher reliability.

To illustrate, an exemplary Data object has been crafted:
...
...

This approach should ideally function seamlessly. However, practical implementation might encounter various obstacles along the way. A suggestion is proposed for a click-to-copy mechanism, where users select an item in Window A before placing it into Window B through localStorage, enabling the duplication of the item at the new location.

wina-3.htm
...
...

winb-3.htm
...
...

While acknowledging that this response may not align precisely with your query, I urge you to provide further clarity in formulating your question. It appears you are circling around the main issue without addressing it directly.

Wishing you success in tackling this challenge!

Answer 2

Finding a solution for this issue seems to be quite complex. The inconsistency in DnD terminology and functionality across different browsers adds another layer of difficulty. For example, FireFox triggers a dragenter event upon drop, while Chrome fails to detect a drop event from objects originating from another window.

In my attempt to address this problem, I conducted some testing. To replicate the scenario, I suggest copying the content into a Text file and saving it as HTM or HTML. Then, proceed to open the file locally in your browser. Next, open another window and access the second HTM file. By following these steps, you should have two windows where dragging elements between them is possible.

wina-1.htm

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Window A</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
  .items {
    position: relative;
  }
  .items > div {
    margin-right: 5px;
    width: 150px;
    height: 150px;
    padding: 0.5em;
    border-radius: 6px;
    display: inline-block;
  }
  #log {
    width: 100%;
    height: 5em;
    overflow-y: auto;
  }
  [draggable].idle {
    background-color: rgba(255,0,0,0.75); 
  }
  [draggable].selected {
    background-color: rgba(255,0,0,0.95);
  }
  </style>
</head>
...
...

<p>The use of raw JavaScript is emphasized in this setup. While experimenting with jQuery UI, retaining the stylesheet was done for simplified theming purposes. Notably, there are sections allocated for logging details, draggable elements, and static items within the setup.</p>

<p><strong>winb-1.htm</strong></p>
...
...

<p>jQuery was incorporated in Window B with an intent to enhance the element's functionality by transforming it into a jQuery UI Draggable entity.</p>

<p>One crucial aspect to bear in mind is the limitation on alterations during transit. Since the source element remains detached from the target DOM, modifications cannot occur en route. Instead, initializing a new draggable element is advised within the <code>drop event, creating a fresh item assigned with all relevant data at that point.

Additionally, considering the unreliability of data transfer, utilizing localStorage over DataTransfer may prove more efficient and dependable. This method mirrors a cookie-like behavior, boasting higher reliability.

To illustrate, an exemplary Data object has been crafted:
...
...

This approach should ideally function seamlessly. However, practical implementation might encounter various obstacles along the way. A suggestion is proposed for a click-to-copy mechanism, where users select an item in Window A before placing it into Window B through localStorage, enabling the duplication of the item at the new location.

wina-3.htm
...
...

winb-3.htm
...
...

While acknowledging that this response may not align precisely with your query, I urge you to provide further clarity in formulating your question. It appears you are circling around the main issue without addressing it directly.

Wishing you success in tackling this challenge!

Learn how to leverage the jQuery Draggable plugin to easily create draggable elements and initiate dragging using the HTML5 native Drag and Drop

Answer №1

Similar questions

How to loop through a JSON object using AngularJS

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

What is the process for displaying user input on the console?

Setting up TailwindCSS in Nuxt3: A step-by-step guide

How can I create an Onclick function that works for multiple buttons sharing the same ID?

Attempting to store user information in local storage was unsuccessful in my attempt

Notifying the Player of Victory in a Javascript Tic Tac Toe Game: The Winning Alert

Using a custom TypeScript wrapper for Next.js GetServerSideProps

Transforming S3 Buffer Information into a PDF Document

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

JavaScript - Removing Content from an Element

Using JavaScript and the Firefox browser, learn how to easily highlight an element with Selenium-WebDriver

Generating Angular select options dynamically using ng-repeat

Customize bullet list icons to adjust in size based on content using css

Determining the file size of an HTML and JavaScript webpage using JavaScript

Merge two JSON objects together by matching their keys and maintaining the original values

Need help with updating React component state within a Meteor.call callback?

Dynamically load directives through the use of ng-repeat

Choose particular spreadsheets from the office software

Guide to verifying a value within a JSON object in Ionic 2