Search code examples
cssdrag-and-dropdraggablehtml5-draggable

Drag and Drop HTML (placeholder)

Can anyone help me with drag and drop placeholder. I have 2 row's (left-right), each of them have 5 items.

I want to show the placeholder (border-style: dotted;) with neat animation. Soo.. before i drop the item i want to show the border.

Below you can find the example that im using from w3school

https://www.w3schools.com/html/html5_draganddrop.asp

How i want it to look!

enter image description here

Solution

  • If you use plain javascript:

    I created this solution on w3schools for you:

    https://www.w3schools.com/code/tryit.asp?filename=FRCFSRF5F4RW

    See the ondragstart and ondragend. The functions called there, set the border to the dotted one or back to the solid one. You can plac with the css value of course, but this is the basic implementation.

    If you use jQuery ui drag:

    Use the "drag" event in jQuery draggable:

    $( "#draggable" ).draggable({
  drag: function() {
    $("#YOUR_PLACEHOLDER").css("border", "1px dotted black");
  }
});

    see here for more information: https://jqueryui.com/draggable/#events