droparea | HTML5 drag and drop image | File Upload library

I'm trying to figure out how i get the data and put the data in some charts using papaparse.

I could get the data from console.log when I put a csv file into a box.

like this:

but I have no idea how to display data on the web.

so this is my code :

I am using pikaday datepicker package in laravel and installed pikaday package using npm. After installing the package I have included require('pikaday/pikaday'); in my app.js and run the npm run dev to compile js.

After that, I have created a custom datepicker component like this:

I am trying to get files using file-system-access API and it works good using this code:

This code generates two drop areas and one dragable rectangle of blue colour.
I want the blue rectangle to be able to be dropped in only the gold coloured drop area. The other drop area should refuse to accept this particular rectangle.

What can I write to make this happen?

So, in this code the DropArea coloured 'gold' has the keys 'xyz' and I have set Drag.keys: "xyz" to blue rectangle which is supposed to be dragged.

Now, that blue rectangle is being excepted in the other drop area but not in the gold one.

What am I doing wrong?

Good afternoon to all users. Recently faced a file transfer problem. And along with the task, a bunch of problems appeared: There is a js code like this:

I have the following textarea.

I need to restrict the reorder-event of a PrimeFaces Datatable, so that leaving the table horizontally isn't possible . Optionally I would like to add a border when an element ist dragged, so that the user can see, where he can drop the element.

I know that these functions are possible under the normal Drag and Drop-function, as we can the in the Primefaces showcase. Restriction: https://primefaces.org/showcase/ui/dnd/draggable.xhtml (last Element)
Highlight of the Droparea: https://primefaces.org/showcase/ui/dnd/custom.xhtml

I went through the doku of primefaces, but yet haven't found anything that would make it possible to restrict the area. For the Highlight i tried to use the ajax-event, by using the onstart with a js-function which sets a styleclass to the table, but since the Event isn't triggered while dragging but by dropping, this wasn't as successful as I hoped.

The minimal example is based on the Primefaces Showcase dealing with Reorder. My xode is a copy of the showcase (https://primefaces.org/showcase/ui/data/datatable/reorder.xhtml). The only thing I changed is the width of the datatable to see, wether it's still possible to move the element above the border

Is there any way to get this worked? I would appreciate any assistance, thanks in advance!

PrimeFaces Version: 6.2

I'm trying to get the height of the image from base64. Here's my code,

I wanted to implement a function that users can drag the marker (which is defined as MapQuickItem) on the map and automatically change its path (which is defined as MapPolyline). Currently I can only drag the marker but don't know how to change its path.

If I want to define a DropArea under the Map and call the MapPolyline.removeCoordinate() function to change the path, how to visit the index in the delegate? And I'm not sure if this idea will work.

Here is the code: