HTML和JavaScript可以结合起来，在网页上创造出惊人的、吸引人眼球的动画和效果。互联网上有数以百万计的网站，你不希望你的网站在这些网站中被遗忘。你可以给网页上的某个元素提供的最简单的效果之一就是拖放效果。将一个项目移动并放置到网页上的任何一点。在这篇文章中，我们将向你展示如何使一个元素在网页上可拖可放。
用HTML和JavaScript实现可拖动和可放下的元素
创建一个新的HTML元素，在HTML文件的body标签内，用以下几行代码创建一个新的div元素。
<div id="dragElement" class="dragElement">
<p>Drag and Drop me
这将创建以下网页。
为了使这个元素有一点风格，在**标签**外写下以下代码。
.dragElement { width: 100px; height: 70; background-color:lightblue; display: inline-block; align-items: center; vertical-align: bottom; } /style> 通过改变这个样式，你可以在网页上得到以下输出。  对于脚本代码，创建一个新的**脚本标签<script>，** 我们将把javascript放在这个脚本标签里面。对于javascript部分，我们将首先创建一个新的**var** ，以后将使用元素的引用来改变它在网页上的位置。 var dragValue。 接下来，我们将创建一个名为**move()**的函数，用来移动该元素。在这个移动函数中，我们要做的第一件事是用下面这行代码在一个变量中获得我们元素的引用。 var element\=document.getElementById("dragElement")。 既然我们有了引用，我们就要把这个元素的位置设置为绝对值。因为我们要用我们的选择来移动这个元素，我们要把它准确地放在我们想要的位置，而不是相对于其他元素。 element.style.position \= "absolute"; 当我们点击这个元素时，我们想把我们的元素的引用传递给**"dragValue "**变量，这样我们就可以操纵它的位置。 element.onmousedown \=function( ){ dragValue\=element; }。 现在，我们已经将我们的元素的引用存储在**dragValue** 变量中，我们现在要通过使用以下几行代码将其置于鼠标的位置。 document.onmousemove \=function(e ){ var x\=e.pageX; var y\=e.pageY; dragValue.style.left \=x+ "px"; dragValue.style.top \=y+ "px"; }; 当我们释放鼠标按钮时，我们要从**"dragValue**"变量中删除我们元素的引用。 element.onmouseup \=function( ){ dragValue\= null; }。 最后一步是用下面这行代码来调用这个**move()**函数。 move()。 完整的脚本代码将是。 <script> move(); var dragValue; functionmove() { var element\=document.getElementById("dragElement"); element.style.position \= "absolute"; element.onmousedown \=function( ){ dragValue\= element; }; element.onmouseup \=function( ){ dragValue\= null; }; document.onmousemove \=function(e ){ var x\=e.pageX; var y = e. pageY; dragValue.pageY; dragValue.style.left \=x+ "px"; dragValue.style.top \=y+ "px"; }; } </script> 保存文件并执行HTML，你将在浏览器上得到以下结果。就这样，你已经在虚构的javascript中制作了一个拖放元素。
结论
使用vanilla javascript和HTML可以创建的最简单的效果之一是在你的网页上创建可拖放的元素。在数以百万计的网站中，你希望你的网页能够脱颖而出。为此，网页需要有超强的吸引力和互动性。由于javascript库的数量不断增加，有多种方法可以做一个特定的效果或动画。但是，今天我们重点讨论的是用vanilla的javascript来创建一些互动的东西。
