拖放HTML(占位符) [英] Drag and Drop HTML (placeholder)

问题描述

任何人都可以通过拖放占位符来帮助我.我有2行(左右)，每行有5个项目.

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

我想用整洁的动画显示占位符(border-style: dotted;).如此..在我放下项目之前，我想显示边框.

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

下面您可以从 w3school

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

我希望它看起来如何！

推荐答案

如果您使用纯JavaScript :

我为您在w3schools上创建了此解决方案:

I created this solution on w3schools for you:

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

请参见ondragstart和ondragend.在那里调用的函数将边框设置为虚线或实心边框.您当然可以使用css值，但这是基本的实现.

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.

如果您使用jQuery ui拖动:

在jQuery可拖动中使用拖动"事件:

Use the "drag" event in jQuery draggable:

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

有关更多信息，请参见此处: https://jqueryui.com/draggable/#events

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

这篇关于拖放HTML(占位符)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！