How can I implement a javascript drag and drop without any drop area ?

Question

Glen R. Goodwin · Accepted Answer

Essentially, you need to make a big drop area the size of your entire page.  This can be done with a large DIV tag, or you could look into whether the BODY element can receive drop events or not.

Now admittedly I have not worked with the HTML5 Drag and Drop stuff but you could do something like this:

The real problem is your usage of the appendChild method, which on a drop event will merely append the element you are dragging into the droparea as the last element.

I suspect what you are really trying to do is to have a big space where you can position things any way you want just by merely dragging them about.  This then might be more appropriate to what you want.

[code]    
    %3Cdiv id="droparea" draggable="false" style="position: absolute; z-index: 100; left: 0px; right: 0px; top: 0px; bottom: 0px;" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"%3E
        %3Cdiv draggable="true" id="draggable1" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;"%3EDrag me 1%3C/div%3E
        %3Cdiv draggable="true" id="draggable2" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;"%3EDrag me 2%3C/div%3E
        %3Cdiv draggable="true" id="draggable3" ondragstart="drag(this,event)" style="z-index: 200; width: 200px; height: 20px; border: 2px solid red; background: none repeat scroll 0% 0% green; font-weight: bold; margin: 10px;"%3EDrag me 3%3C/div%3E
    %3C/div%3E
    %3Cscript charset="utf-8" type="text/javascript"%3E
	  var offsetx = null, offsety = null;
        function drag(target, event) {
		if (!target.draggable) return;
		offsetx = target.offsetLeft-event.clientX;
		offsety = target.offsetTop-event.clientY;
            event.dataTransfer.setData('Text',target.id);
        }

function drop(target, event) {
            var id = event.dataTransfer.getData('Text');
		if (!id) return;
            var e = document.getElementById(id);
            e.style.position = "absolute";
            e.style.left = (event.clientX+offsetx)+"px";
            e.style.top = (event.clientY+offsety)+"px";        
            event.preventDefault();
        }
    %3C/script%3E
[/code]

The solution is to use absolute positioning instead of letting the div element manage positioning.

Lc Dmrr · Answer

Thanks to Glen R. Goodwin ! it was not exactly what I was looking for but now it works.
I decrease the counter when the content is bigger than when and I remove the element when it's equal to 1. This is what I want to do. thank you.
Here is the code

%3E %3Cbody style="Background:#FFFFFF;"%3E

%3E %3Cdiv id="A" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false" style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 68%; background: #F0D0D0;"%3E

%3E %3Cdiv draggable="true" id="1" ondragstart="drag(this,event)" style="z-index: 1; border: 1px solid black; background: #404040; color: white; font-weight: bold; margin: 10px; font-size: 100px; overflow: hidden; text-align: center;"%3E3%3C/div%3E

%3E %3Cscript charset="utf-8" type="text/javascript"%3E

%3E function drag(target, event) {

%3E 	if (!target.draggable) return;

%3E 	event.dataTransfer.setData('Text',target.id);

%3E }

%3E function drop(target, event) {

%3E 	var id = event.dataTransfer.getData('Text');

%3E 	if (!id) return;

%3E 	var c = document.getElementById(id);

%3E 	console.log("child","id: "+c.id,event);

%3E 	var val = c.innerHTML;

%3E 	console.log("value","id: "+val);

%3E 	if(val %3E 1){

%3E 		c.innerHTML = val-1;

}else{

%3E 		var p = event.srcElement

%3E 		console.log("parent","id: "+p.id);

%3E 		d = p.removeChild(c);

}

%3E 	event.preventDefault();

}
%3C/script%3E

%3E %3C/body%3E

Rutwick Gangurde · Answer

I haven’t done it before but I will try to break it down into a sequence of actions for you.

For drag and release you have to use mousedown + mousemove + mouseup, since if you think of a drag, it’s simply a combination of the above three events. I would suggest use jQuery, it’s there to help you!

Next is to figure out if you want a freehand sketch, or simply doodling around or if you want to draw a certain shape, such as a rectangle. In case of a rectangle, you have to get the position of the cursor from the event object, meaning x and y and the size of the rectangle and then pass it to the fillrect function which takes the x, y, horizontal size and vertical size as the inputs. Notice: Since everything flows from top %3E bottom and left %3E right in the browser, you can only have a positive drag, or a rectangle drawn from the left to right and top to bottom. For the opposite direction, you may have to work around a bit to actually draw lines and paint the shape.

Consider the old X, Y to be [100, 100]. If you drag it to a position, [200, 150], you can calculate the length and breadth as follows:

Horizontal = New X - Old X = 200 - 100 = 100 pixels

Vertical = New Y - Old Y = 150 - 100 = 50 pixels

So you know that the rectangle is going to be 100 x 50 pixels in dimensions.

Simply pass in the cursor positions an sizes to the fillrect function and it will draw the rectangle for you.

The rectangle will be something like this:

Now, if the drag is negative, meaning, if you drag the cursor to the left or upwards from with respect to the old positions, then you have to slightly adjust the calculation to calculate the sizes. The size calculation will change as:

Horizontal length = Old X - New X

Vertical length = Old Y - New Y

As I mentioned above, you cannot use the fillrect function to show the rectangle being drawn, as it will always show (visual FX) it as being drawn from the left to right and top to bottom. To work around this, I can think of painting pixel by pixel, as even if you use the Path functions to draw lines, they will still appear as being painted from left to right. A little bit of digging around should help you with that. Same goes for doodling around, constantly keep on calculating the pixel positions and painting them.

Adekola Olawale · Answer

To create a drag-and-drop image uploader, you can follow these steps:

Step 1: HTML Markup First, set up the HTML structure for your uploader. Create a container element and include a drop zone where users can drag and drop images. Also, add an input element of type "file" to support traditional file selection.

[code]%3Cdiv id="drop-zone"%3E
  %3Cp%3EDrag and drop images here or click to browse.%3C/p%3E
  %3Cinput type="file" id="file-input" multiple%3E
%3C/div%3E

[/code]Step 2: CSS Styling Next, apply CSS styles to create a visually appealing drag-and-drop interface. You can customize the appearance to match your design preferences.

[code]#drop-zone {
  border: 2px dashed #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
}

#drop-zone p {
  margin: 0;
}

#drop-zone.hover {
  background-color: #f9f9f9;
}

[/code]In this example, we set a dashed border, padding, and text alignment to create a container for the drop zone. We also define a hover state for visual feedback when the user hovers over the drop zone.

Step 3: JavaScript Interaction Finally, add JavaScript functionality to handle the drag and drop events, as well as file selection.

[code]const dropZone = document.getElementById('drop-zone');

dropZone.addEventListener('dragover', (e) =%3E {
  e.preventDefault();
  dropZone.classList.add('hover');
});

dropZone.addEventListener('dragleave', () =%3E {
  dropZone.classList.remove('hover');
});

dropZone.addEventListener('drop', (e) =%3E {
  e.preventDefault();
  dropZone.classList.remove('hover');

const files = e.dataTransfer.files;
  handleFiles(files);
});

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', () =%3E {
  const files = fileInput.files;
  handleFiles(files);
});

function handleFiles(files) {
  for (const file of files) {
    // Perform operations with each file (e.g., upload, preview, etc.)
    console.log('Uploading file:', file.name);
  }
}

[/code]In this JavaScript code, we listen for drag-and-drop events on the drop zone and handle file selection using the input element. When files are dropped or selected, the [code ]handleFiles[/code] function is called, where you can perform the desired operations with each file (e.g., upload to a server, preview, etc.). In this example, we simply log the file name to the console.

With these steps, you'll have a basic drag-and-drop image uploader using HTML, CSS, and JavaScript. You can extend this functionality by adding features like file validation, image previews, or implementing server-side file handling.

I hope this helps you create a drag-and-drop image uploader!

Diana Mari · Answer

Modern web applications have multiple forms of interaction. Among those, drag and drop is, certainly, one of the most appealing to the user. Apps such as Trello, Google Drive, Office 365 and Jira make heavy use of DnD and users simply love it.

Our example component

To illustrate this article, we’ll implement a jigsaw puzzle in React. The puzzle consists of two boards: the first one with the pieces shuffled, the second one with no pieces and the original image in the background.

The pieces

This is the original image of our puzzle:

We need to split it in multiple pieces. I think 40 is an optimal number, given the proportion of this image:

Then, we save all assets in the images folder:

Now we need to save the original image (non-splitted) in this same folder:

Tip: You don’t need to split the sample image by yourself. Just take a look at this sandbox [ https://codesandbox.io/s/nr6y00y0v0 ] and you’ll find all needed images right there.

The component’s state

After that, let’s create our component basic structure:

[code]import React, { Component } from 'react';
import originalImage from './images/ny_original.jpg';
import './App.css';

class Jigsaw extends Component {
  state = {
    pieces: [],
    shuffled: [],
    solved: []
  };

// ...
}

[/code]In the above code, we’ve defined the component’s state. It has three arrays:

1. The pieces array will store objects containing data for each piece of our puzzle.
2. The shuffled array represents the board where every piece will start at, all shuffled.
3. The solved array represents the board where all pieces will be dragged to, in the correct order.
Once we’ve defined the structure of our component’s state, we need to set the initial values of each array. We can do this in the componentDidMount lifecycle method:

[code]componentDidMount() {
  const pieces = [...Array(40)]
    .map((_, i) =%3E (
      {
        img: `ny_${('0' + (i + 1)).substr(-2)}.jpg`,
        order: i,
        board: 'shuffled'
      }
    ));

this.setState({
    pieces,
    shuffled: this.shufflePieces(pieces),
    solved: [...Array(40)]
  });
}

[/code]In the above snippet, we’ve initialized the three arrays of our component’s state. Did you notice the […Array(40)] part? We use it twice in this method. It’s leveraging the spread operator to create an iterable array with 40 items.

Each item of the pieces array is an object containing three properties:

1. img: the path of the piece’s image.
2. order: the correct position of that piece in the original image.
3. board: the name of the board where that piece is. By default, all pieces “born” in the shuffled board.
To initialize the shuffled array, we’ve created a shufflePieces method. It randomizes the items of a given array by using the Durstenfeld shuffle algorithm:

[code]shufflePieces(pieces) {
  const shuffled = [...pieces];

for (let i = shuffled.length - 1; i %3E 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }

return shuffled;
}

[/code]Note: You don’t really need to understand this algorithm for the purpose of this article, but if you’re curious to know how it works, here’s a detailed explanation [ https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm ].

The render method

Now let’s see how the render method for this component looks like:

[code]render() {
  return (
    %3Cdiv className="jigsaw"%3E
      %3Cul className="jigsaw__shuffled-board"%3E
        {
          this.state.shuffled.map((piece, i) =%3E
          this.renderPieceContainer(piece, i, 'shuffled'))
        }
      %3C/ul%3E
      %3Col className="jigsaw__solved-board" style={{ backgroundImage: `url(${originalImage})` }}%3E
        {
          this.state.solved.map((piece, i) =%3E
          this.renderPieceContainer(piece, i, 'solved'))
        }
      %3C/ol%3E
    %3C/div%3E
  );
}

[/code]As you can see, we create two lists, one for each board. The piece’s rendering logic was extracted to a separate method. Here it is:

[code]renderPieceContainer(piece, index, boardName) {
  return (
    %3Cli key={index}%3E
      {piece && %3Cimg src={require(`./images/${piece.img}`)}/%3E}
    %3C/li%3E
  );
}

[/code]This method uses short circuit evaluation to render the piece image conditionally [ https://programmingwithmosh.com/react/conditional-rendering-react/ ].

I’ve added some styling to make it look nice. In this article, I won’t cover how it was made, but you can find the complete CSS file in this sandbox [ https://codesandbox.io/s/pw2w2ryy1q ].

And here’s how our component looks:

It looks good. Doesn’t it? However, it does nothing for now. The next step is to implement the drag and drop logic itself.

Drag and drop: first things first

To make it possible to drag a piece, we need to mark it with a special attribute called draggable:

[code]renderPieceContainer(piece, index, boardName) {
  return (
    %3Cli key={index}%3E
      {
        piece && %3Cimg
          draggable
          src={require(`./images/${piece.img}`)}/%3E
      }
    %3C/li%3E
  );
}

[/code]After that, we need to create a handler for the onDragStart event of our pieces:

[code]piece && %3Cimg
  draggable
  onDragStart={(e) =%3E this.handleDragStart(e, piece.order)}
  src={require(`./images/${piece.img}`)}/%3E

[/code]And here’s the handler itself:

[code]handleDragStart(e, order) {
  e.dataTransfer.setData('text/plain', order);
}

[/code]This is what the above snippets do:

1. We’re passing the piece’s order property as an argument for the handleDragStart method. It will be used as an unique value to identify a piece.
2. You may have noticed that, in the handleDragStart method, we’re using a property of the event object called dataTransfer. The dataTransfer [ https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer ] object is used to store the data needed to identify what is being dragged. In our example, we use the value of the order parameter for such purpose. We’ll need this object again later, when handling the dropping logic.
3. The first argument passed to the setData method is the drag data type. The drag and drop API supports dragging multiple types of data, such as text, files, URLs and others [ https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types ]. In our component, the text/plain is good enough for us.
The drag part is done. But dragging a piece is useless if you have no place to drop it. The first thing to do in order to make pieces droppable is to define a handler for the onDragOver event of our piece containers (the li tags of both lists). This handler will be very simple. So simple that, in fact, we can define it inline:

[code]renderPieceContainer(piece, index, boardName) {
  return (
    %3Cli key={index}
      onDragOver={(e) =%3E e.preventDefault()}%3E

// ...
}

[/code]By default, most zones of a page won’t be a valid dropping place. This is the reason why the normal behavior of the onDragOver event is to disallow dropping. To overcome this, we’re calling the event.preventDefault() method.

Read more ☞ http://tech.learn4startup.com/21c0d2a07e

Kevin Lam · Answer

This is a simple three step process. I’m assuming you’re referring to dragging an external image file into the browser and not an image already existing on the web page.

1. Drag and drop the file from your desktop to the web page: File drag and drop [ https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop ] - ensure that you have correctly set the HTML element to be file drag and drop enabled. The resulting binary file data will be encoded into a Base64 image data string format.
2. You can then assign the Base64 image data to an existing %3Cimage%3E tag or you can create an Image object in Javascript. How to display Base64 images in HTML? [ https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html ] It’s literally just assigning the resulting base64 string data to a .src property of an %3Cimage%3E type.
3. Now you can use Canvas’ drawImage() API to draw a copy of the image from the %3Cimage%3E type to your %3Ccanvas%3E type: HTML canvas drawImage() Method. [ https://www.w3schools.com/tags/canvas_drawimage.asp ] %3Ccanvas%3E is not capable of directly importing an external image by itself. You must use an %3Cimage%3E object to load an external image through the .src property.

Anonymous · Answer

The easiest way to get up and running with a website is using Webflow [ http://webflow.com ]. It’s not free though but you can easily create one and is primarily aim for users who just want to get a beautiful site up and running in a few minutes. You’ll find a couple of templates to begin with and a nice tutorial to get you started. Sign up for a trial and see if it works for you.

As a full stack developer, I could find a lot of ideas here and I create sites using this one so fast that my prototype is almost close to done. The turnaround is so insane. Trust me, they are the best out there if you simply want the “drag and drop” functionality. Plus, they’ll automatically generate beautiful code for you. Easy wizzy!

Alternatively, there’s Bootstrap Studio [ https://bootstrapstudio.io/ ] if you want to look into that.

Hope that helps!

Cheers,
Me

Narnacle Digital · Answer

To add drag-and-drop functionality to a React app, you can use the [code ]react-dnd[/code] library. This library provides a set of React components that you can use to build drag-and-drop interfaces.

Here is a simple example of how you can use [code ]react-dnd[/code] to enable drag-and-drop in your React app:

Install the [code ]react-dnd[/code] library:

[code]npm install react-dnd
[/code]Create a component that you want to make draggable. This component should wrap the element that you want to make draggable, and it should accept a few props that [code ]react-dnd[/code] provides.

[code]import { useDrag } from 'react-dnd';

function DraggableBox(props) {
  const { id, left, top } = props;
  const [{ isDragging }, drag] = useDrag({
    item: { id, left, top },
    collect: (monitor) =%3E ({
      isDragging: monitor.isDragging()
    })
  });

return (
    %3Cdiv ref={drag} style={{ left, top }}%3E
      Drag me!
    %3C/div%3E
  );
}
[/code]Create a component that you want to use as a drop target. This component should accept a few props that [code ]react-dnd[/code] provides, and it should use the [code ]useDrop[/code] hook to register itself as a drop target.

[code]import { useDrop } from 'react-dnd';

function DropTarget(props) {
  const { onDrop } = props;
  const [{ isOver }, drop] = useDrop({
    accept: 'box',
    drop: (item) =%3E onDrop(item),
    collect: (monitor) =%3E ({
      isOver: monitor.isOver()
    })
  });

return (
    %3Cdiv ref={drop}%3E
      Drop here!
    %3C/div%3E
  );
}
[/code]Use the draggable and drop target components in your app. You can nest the draggable components inside the drop target, or you can have them side by side.

[code]function App() {
  return (
    %3CDropTarget onDrop={console.log}%3E
      %3CDraggableBox id="1" left={0} top={0} /%3E
      %3CDraggableBox id="2" left={100} top={0} /%3E
      %3CDraggableBox id="3" left={200} top={0} /%3E
    %3C/DropTarget%3E
  );
}
[/code]This is just a simple example, but [code ]react-dnd[/code] provides many more features and options that you can use to customize your drag-and-drop interface. I recommend taking a look at the [code ]react-dnd[/code] documentation for more information.

Emmanuel Straschnov · Answer

Traditionally, drag and drop tools have been quite rigid in terms of what you could do with them. The answer to this questions a few years ago was that you could build a static website with a drag and drop tool, while you'd have to code to build an app (like airbnb, etc).

This is changing, some new tools have emerged that enable people to actually program without having to code. If you think about it, it's a natural trend, as things in technology become more intuitive and visual over time.

This is self-promotion, but I'm the cofounder of one of these tools. It's called Bubble (Bubble - A new way of programming without code [ https://bubble.is/ ]). You can build your product without code on it. It takes time as there is a learning curve, but this is with a visual interface that gets rid of the coding aspect. You could build something like Airbnb (literally) on Bubble.

Kishalaya Bhattacharjee · Answer

use jquery. ui plugin and then use jquery UI draggable and droppable.
I would post some links to give you an idea:

1. first jquery draggable for the elements which need to be dragged.Draggable | jQuery UI [ https://jqueryui.com/draggable/ ]
2. Second Jquery Droppable for target drop area. Droppable | jQuery UI [ https://jqueryui.com/droppable/ ]
3. example : a) Drag and Drop example using jQuery and JavaScript in HTML [ https://www.aspsnippets.com/Articles/Drag-and-Drop-example-using-jQuery-and-JavaScript-in-HTML.aspx ]
b) Drag and Drop Example using jQuery JavaScript in HTML [ http://viralpatel.net/blogs/implement-drag-and-drop-example-jquery-javascript-html/ ]
4. .Further it is now a standard feature in HTML 5 .Please refer to the link: HTML5 Drag and Drop [ https://www.w3schools.com/html/html5_draganddrop.asp ]

Anonymous · Answer

What is the difference between a hand crafted item and a mass produced one?

Also consider more what happens when drag and drop doesn't look or work exactly as you desire and there are no further gui options to change? You need to get your hands dirty in code anyway and usually not great code.

It's denying the craft of a coder and a graphic designer. My advice not that you asked but if it's a blog use wordpress and pay for a design or theme you like.

Try coding if you have time you might live it,  it's a buzz.

Joseph Danko · Answer

Using the process you imagine the files will at least temporarily reside in your PC if it works at all. I can’t tell what you actually have in mind, perhaps drag and drop from Microsoft One Drive to Google Docs or DropBox to Box.

Parijat Das · Answer

Hi,

It is not possible to create drag and drop functionality without using Javascript. CSS is only used for styling the webpage or creating CSS3 animations but for functionality, you have to use Javascript coding (i.e. mouse events).

Anthony James Dreessen · Answer

Drag and drop is awesome! It rapidly speeds up development and can give you a professional, polished product at a fraction of the time and expense that it would take to otherwise develop the same website.

Unfortunately, with Drag and drop, you can only do what the developers of the drag and drop system thought you might do. This is a huge range of possibilities- but it will necessarily not encompass the leading, bleeding edge of technology.

Quora User seems to imply that professional developers and designers dislike and are limited by drag and drop tools. However, it is my experience that  professional developers and designers (at my agency at least) use drag-and-drop or other means of bulk code generation all the time as a template or scaffolding on which to build a final product. Making our lives easier by waving away the annoying, fiddly bits so we can focus on making the next great thing is not bad. There are countless sites out there that started as wordpress templates that now look nothing like that template because developers and designers are able to use the generated code and make it better.

So treat drag and drop like what it is, a tool. For some people it will be the only one they need. For others, it is just the first step that creates the raw material with which they will work.

Anonymous · Answer

Most of the time you don’t need to code. Tools like the built-in Gutenberg editor or plugins like Elementor will allow you to create WordPress content without any code.

That said there is a point where you may need to code to create a custom block to do something that is exclusive to your site or to provide custom functionality to the people who create content for you so you may be able to avoid coding but I wouldn’t guarantee it today any more than I did when it was all PHP and no React

Even if you don’t factor Gutenberg or any of the modern WordPress ecosystem into the equation the same thing applies. If you stayed strictly inside the boundaries of what core WordPress and the plugin ecosystem provided then no, you didn’t need to code, but if you wanted to customize the way Core worked or you wanted to add functionality for which plugins are not available then you do need to code

Steve Pallen · Answer

You have two choices. Build it your self or use a JS package to do it for you.

There are a number of good articles on online to that describe how to do it.

You also need to consider a few things:

* Do you want to support multiple files?
 * Do you want to popup a confirmation dialog?
 * Do you want to allow the user to change the file name, add a description, preview the file, etc?
 * Do you want to provide a progress bar and a cancel button?
You also need your backed ready to handle a multi-part form post to process the file.

Rafael Pinto · Answer

Yes, HTML5 allows you to do it easily: HTML5 Drag and Drop [ http://www.w3schools.com/html/html5_draganddrop.asp ]

Mudassir Ali · Answer

I had built something similar(not exactly same), I had built decision-tree builder using D3.js - Data-Driven Documents [ https://d3js.org/ ]. I’d say the following examples would be good starting point for what you’re trying to achieve, perhaps mix the concepts from the both.

Interactive tool for creating directed graphs using d3.js. [ https://bl.ocks.org/cjrd/6863459 ]

Interactive d3.js tree diagram [ http://bl.ocks.org/d3noob/8375092 ]

Leonid S. Knyshov · Answer

Here is your foundation

* Draggable | jQuery UI [ http://jqueryui.com/draggable/ ]
 * Droppable | jQuery UI [ http://jqueryui.com/droppable/ ]

ThruSkills · Answer

HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up.

HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Drag and Drop Events are as follows:

* Dragstart.
 * Dragrenter.
 * Dragover.
 * Dragleave.
 * Drag.
 * Drop.
 * Dragend.