javascript - 如何在javascript中为拖放元素添加效果

标签 javascript jquery css html

我创建了一个简短的练习，其中涉及 3 个属于特定形状的框。我现在已经设置好，如果有人将形状拖到正确的框中，它就会放在框中。但是，目前如果有人将形状拖到错误的形状，它只会重置。我想添加一些效果，例如，如果人拖到错误的位置，它会重置并且框中会出现红色闪光，如果正确则出现绿色。如果可能的话，即使有人将它添加到正确的框中，但在指定的数字(例如三 Angular 形框中的第三个三 Angular 形)之后，也能够出现红色闪光会很好。这将如何完成？这是我当前的代码

var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");
var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");
var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");

circ.ondragstart = function(evt) {
  evt.dataTransfer.setData('key1', evt.target.id);
  console.log("dragging circle");
}
tria.ondragstart = function(evt) {
  evt.dataTransfer.setData('key2', evt.target.id);
  console.log("dragging triangle");
}
squa.ondragstart = function(evt) {
  evt.dataTransfer.setData('key3', evt.target.id);
  console.log("dragging square");
}
/*circ2.ondragstart = function(){
    evt.dataTransfer.setData('key4','c2');
    console.log("yesh");
}
tria2.ondragstart=function(){
   evt.dataTransfer.setData('key5','t2');
   console.log("nani"); 
}
squa2.ondragstart=function(){
   evt.dataTransfer.setData('key6','s1');    
   console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over t");
}
dropc.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over c");
}
drops.ondragover = function(evt) {
  evt.preventDefault();
  console.log("over s");
}
dropt.ondrop = function(evt) {
  evt.preventDefault();
  var icont = evt.dataTransfer.getData('key2');
  console.log("drop t");
  console.log(icont);
  var current = document.getElementById(icont);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  dropt.appendChild(newcurrent);
}
dropc.ondrop = function(evt) {
  evt.preventDefault();
  var iconc = evt.dataTransfer.getData('key1');
  console.log("drop c");
  console.log(iconc);
  var current = document.getElementById(iconc);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  dropc.appendChild(newcurrent);
}
drops.ondrop = function(evt) {
  evt.preventDefault();
  var icons = evt.dataTransfer.getData('key3');
  console.log("drop s");
  console.log(icons);
  var current = document.getElementById(icons);
  console.log(current);
  var newcurrent = document.createElement('img');
  newcurrent.src = current.src;
  drops.appendChild(newcurrent);
}
#body {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.column {
  flex: 1;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
}

.column-one {
  order: 3;
}

.column-two {
  order: 1;
}

.column-three {
  order: 4;
}

.column-four {
  order: 2;
}

.column-five {
  order: 5;
}

.drop-zone1 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone2 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone3 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.icon1 {
  width: 50px;
  height: 50px;
  margin-left: 45px;
}

.icon2 {
  width: 50px;
  height: 50px;
  margin-left: 56px;
  align-content: center;
}

.icon3 {
  width: 50px;
  height: 50px;
  margin-left: 58px;
}

.question {
  text-align: center;
  color: #535f6b;
  font-family: sans-serif;
  font-style: italic;
}
<p class="question"><b>Drag and drop the elements to their corresponding set to achieve: <br>a. 3 circles in the circle set<br>b. 2 triangles in the triangle set<br>c. 5 squares in the square set</b></p>
<div class="container">
  <div class="column column-one"><img src="circle.png" id="c1" style="margin-left: 55px"></div>
  <div class="column column-two"></div>
  <div class="column column-three"><img src="square.png" id="s1" style="margin-left: 58px"></div>
  <div class="column column-four"><img src="triang.png" id="t1" style="margin-left: 45px"></div>
  <div class="column column-five"></div>
</div>
<br>
<div class="container">
  <div class="column column-one">
    <div class="drop-zone1" id="dzt"></div>
  </div>
  <div class="column column-two"></div>
  <div class="column column-three">
    <div class="drop-zone2" id="dzc"></div>
  </div>
  <div class="column column-four">
    <div class="drop-zone3" id="dzs"></div>
  </div>
  <div class="column column-five"></div>
</div>
<div class="container">
  <div class="column column-one">
    <div class="icon1"><img src="triang.png"></div>
  </div>
  <div class="column column-two"></div>
  <div class="column column-three">
    <div class="icon2"><img src="circle.png"></div>
  </div>
  <div class="column column-four">
    <div class="icon3"><img src="square.png"></div>
  </div>
  <div class="column column-five"></div>
</div>

这是图片的样子 enter image description here 提前致谢并致以最诚挚的问候

最佳答案

在下面的代码片段中，我添加了一些条件来检查对象是否在其区域中被拖动，如果是，我添加了具有动画背景的类(动画在底部创建)，否则它将检查拖动区域是否有 child (不触发错误动画，否则触发错误动画)

您可以通过更改 css 动画和 css 类 .green 和 .red 来设置自己的动画和颜色 看下面的片段

var circ = document.getElementById("c1");
var tria = document.getElementById("t1");
var squa = document.getElementById("s1");

var circ2 = document.getElementById("c2");
var tria2 = document.getElementById("t2");
var squa2 = document.getElementById("s2");

var dropt = document.getElementById("dzt");
var dropc = document.getElementById("dzc");
var drops = document.getElementById("dzs");

tria.ondragstart = function(evt) {
  evt.dataTransfer.setData('key2', evt.target.id);
  console.log("dragging triangle");
}

circ.ondragstart = function(evt) {
  evt.dataTransfer.setData('key1', evt.target.id);
  console.log("dragging circle");
}

squa.ondragstart = function(evt) {
  evt.dataTransfer.setData('key3', evt.target.id);
  console.log("dragging square");
}
/*circ2.ondragstart = function(){
    evt.dataTransfer.setData('key4','c2');
    console.log("yesh");
}
tria2.ondragstart=function(){
   evt.dataTransfer.setData('key5','t2');
   console.log("nani"); 
}
squa2.ondragstart=function(){
   evt.dataTransfer.setData('key6','s1');    
   console.log("omae wa");
}
*/
dropt.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over t");
}
dropc.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over c");
}
drops.ondragover = function(evt) {
  evt.preventDefault();
  //console.log("over s");
}

dropt.ondrop = function(evt) {
  evt.preventDefault();
  var icont = evt.dataTransfer.getData('key2');
  console.log("drop t");
  console.log(icont);
  var current = document.getElementById(icont);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}
dropc.ondrop = function(evt) {
  evt.preventDefault();
  var iconc = evt.dataTransfer.getData('key1');
  console.log("drop c");
  console.log("dd",iconc);
  var current = document.getElementById(iconc);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}

drops.ondrop = function(evt) {
  evt.preventDefault();
  var icons = evt.dataTransfer.getData('key3');
  console.log("drop s");
  console.log(icons);
  var current = document.getElementById(icons);
  console.log(current);
  if(current != null) {
    if(this.hasChildNodes()) return;
    var newcurrent = document.createElement('img');
    newcurrent.src = current.src;
    this.appendChild(newcurrent);
    setBackground("green",this);
  }
  else {
    if(!this.hasChildNodes())
      setBackground("red",this);
  }
}

function setBackground (className,node) {
  node.classList.remove("green");
  node.classList.remove("red");
  node.classList.add(className);
}
#body {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.column {
  flex: 1;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
}

.column-one {
  order: 3;
}

.column-two {
  order: 1;
}

.column-three {
  order: 4;
}

.column-four {
  order: 2;
}

.column-five {
  order: 5;
}

.drop-zone1 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone2 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.drop-zone3 {
  align-content: center;
  <!--border-radius: 50%;
  -->width: 150px;
  height: 150px;
  border: 2px;
  border-style: solid;
  border-color: #535f6b;
}

.icon1 {
  width: 50px;
  height: 50px;
  margin-left: 45px;
}

.icon2 {
  width: 50px;
  height: 50px;
  margin-left: 56px;
  align-content: center;
}

.icon3 {
  width: 50px;
  height: 50px;
  margin-left: 58px;
}

.question {
  text-align: center;
  color: #535f6b;
  font-family: sans-serif;
  font-style: italic;
}


.green {
  animation-name: backgroundGreen;
  animation-duration: 1.5s;
  animation-iteration-count: 3;
  background-color:#0f0;
}

.red {  
  animation-name: backgroundRed;
  animation-duration: 1s;
  animation-iteration-count: 3;
  background-color:#f00;
}

/* The animation code */
@keyframes backgroundGreen {
    0%   {background-color:#fff;}
    50%  {background-color:#00ffbb;}
    100% {background-color:#00ff00;}
}

@keyframes backgroundRed {
    0%   {background-color:#fff;}
    50%  {background-color:#ff0055;}
    100% {background-color:#ff0000;}
}
<p class="question"><b>Drag and drop the elements to their corresponding set to achieve: <br>a. 3 circles in the circle set<br>b. 2 triangles in the triangle set<br>c. 5 squares in the square set</b></p>
<div class="container">
  <div class="column column-one"><img src="https://cdn1.iconfinder.com/data/icons/material-core/20/check-circle-outline-blank-128.png" id="c1" style="margin-left: 55px"></div>
  <div class="column column-two"></div>
  <div class="column column-three"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/square-128.png" id="s1" style="margin-left: 58px"></div>
  <div class="column column-four"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/triangle-128.png" id="t1" style="margin-left: 45px"></div>
  <div class="column column-five"></div>
</div>
<br>
<div class="container">
  <div class="column column-one">
    <div class="drop-zone1" id="dzt"></div>
  </div>
  <div class="column column-two"></div>
  <div class="column column-three">
    <div class="drop-zone2" id="dzc"></div>
  </div>
  <div class="column column-four">
    <div class="drop-zone3" id="dzs"></div>
  </div>
  <div class="column column-five"></div>
</div>
<div class="container">
  <div class="column column-one">
    <div class="icon1"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/triangle-64.png"></div>
  </div>
  <div class="column column-two"></div>
  <div class="column column-three">
    <div class="icon2"><img src="https://cdn1.iconfinder.com/data/icons/material-core/20/check-circle-outline-blank-64.png"></div>
  </div>
  <div class="column column-four">
    <div class="icon3"><img src="https://cdn1.iconfinder.com/data/icons/feather-2/24/square-64.png"></div>
  </div>
  <div class="column column-five"></div>
</div>

关于javascript - 如何在javascript中为拖放元素添加效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48248361/

上一篇：CSS Validator 提示 justify-content 和 -webkit-animation

下一篇：javascript - 纯 CSS 固定表头？

相关文章：

javascript - 这两个代码之间有什么区别？

html - 如何在 PNG 图像可见部分上叠加背景图案？

javascript - CSS Grid 在现有网格元素之上填充动画并占据整个视口(viewport)

css - 如何制作CSS文本溢出动画

javascript - React 多个复选框的行为很奇怪，并且状态中添加了确认和取消功能

javascript - 相对于初始点击拖动元素

javascript - 控制第二个窗口中的内容时，单个按键会触发两次

javascript - Jquery-UI 对话框滚动到页面顶部

jquery - 如何从 BING map api 按纬度和经度获取地址(城市、州、国家、邮政编码)？

javascript - 如何使用 jQuery 激活当前导航链接

©2024 IT工具网  联系我们