有没有一种方法可以检测图像是否已被拖放到div中而不移动图像？

Question

我正在使用JavaScript制作生存游戏，现在我正在设置所有功能。我已经建立了一个清单系统，您可以在其中查找下一个和上一个项目，它显示了项目的描述，编号，图像和名称。现在，我有两个按钮，可让您获取和放置物品，但我希望能够将物品的图像从说明中拖放到游戏主屏幕上，并将其放置，而无需实际移动图像。

我试图检测图像在被拖动时的位置，并检查它是否在游戏屏幕div中，但是最终发生的事情是，即使图像位于正确位置，调用的函数也会发生如果图像没有掉落。

var img = document.getElementById('img');
      var div = document.getElementById('div');
      var divLocation = div.getBoundingClientRect();
      var p = document.getElementsByTagName('p');
      var time = 0;

      img.addEventListener('drag', function() {

        p[0].innerHTML = event.clientX;
        p[1].innerHTML = event.clientY;
        p[2].innerHTML = divLocation.left;
        p[3].innerHTML = divLocation.top;

        if (event.clientX - divLocation.left >= 0 && event.clientX - divLocation.left <= 200) {
          if (event.clientY - divLocation.top >= 0 && event.clientY - divLocation.top <= 200) {

            if (time == 1) {
              alert("test");
              time = 0;
              setTimeout(1000);
            }

          }
        }

      });

      setInterval(function() {
        time++;
        if (time > 1) {
          time = 0;
        }
      }, 1000);

<img src="download.jpg" id="img">

    <div id="div"></div>

当您将图像放到游戏屏幕div中而不移动图像时，我希望项数的变量减少1，但是现在当图像悬停在div上时，功能就会发生。

Answer 1

这是一个简单但完整的拖放实现。

请注意，图像已被拖放，放置，收集，但未移动。

您将要单击预览中的“整页”链接。将图像拖到虚线边框的放置区。

class Response1 {
  final String baseVersion;
  final String mapVersion;
  final String mapVersionString;
  final List<Response1Results> results;

  Response1(
      {this.baseVersion, this.mapVersion, this.mapVersionString, this.results});

  factory Response1.fromJson(Map<String, dynamic> json) {
    return Response1(
      baseVersion: json['baseVersion'] as String,
      mapVersion: json['mapVersion'] as String,
      mapVersionString: json['mapVersionString'] as String,
      results:
          _toObjectList(json['results'], (e) => Response1Results.fromJson(e)),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'baseVersion': baseVersion,
      'mapVersion': mapVersion,
      'mapVersionString': mapVersionString,
      'results': _fromList(results, (e) => e.toJson()),
    };
  }
}

class Response1Results {
  final int aGE;
  final String hidden;
  final int iD;
  final int isOwner;
  final String label;
  final int lastSeen;
  final double lat;
  final double lon;
  final String pM25VAlue;
  final int parentID;
  final String stats;
  final String tHINGSPEAKPRIMARYID;
  final String tHINGSPEAKPRIMARYIDREADKEY;
  final String tHINGSPEAKSECONDARYID;
  final String tHINGSPEAKSECONDARYIDREADKEY;

  Response1Results(
      {this.aGE,
      this.hidden,
      this.iD,
      this.isOwner,
      this.label,
      this.lastSeen,
      this.lat,
      this.lon,
      this.pM25VAlue,
      this.parentID,
      this.stats,
      this.tHINGSPEAKPRIMARYID,
      this.tHINGSPEAKPRIMARYIDREADKEY,
      this.tHINGSPEAKSECONDARYID,
      this.tHINGSPEAKSECONDARYIDREADKEY});

  factory Response1Results.fromJson(Map<String, dynamic> json) {
    return Response1Results(
      aGE: json['AGE'] as int,
      hidden: json['Hidden'] as String,
      iD: json['ID'] as int,
      isOwner: json['isOwner'] as int,
      label: json['Label'] as String,
      lastSeen: json['LastSeen'] as int,
      lat: _toDouble(json['Lat']),
      lon: _toDouble(json['Lon']),
      pM25VAlue: json['PM2_5Value'] as String,
      parentID: json['ParentID'] as int,
      stats: json['Stats'] as String,
      tHINGSPEAKPRIMARYID: json['THINGSPEAK_PRIMARY_ID'] as String,
      tHINGSPEAKPRIMARYIDREADKEY:
          json['THINGSPEAK_PRIMARY_ID_READ_KEY'] as String,
      tHINGSPEAKSECONDARYID: json['THINGSPEAK_SECONDARY_ID'] as String,
      tHINGSPEAKSECONDARYIDREADKEY:
          json['THINGSPEAK_SECONDARY_ID_READ_KEY'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'AGE': aGE,
      'Hidden': hidden,
      'ID': iD,
      'isOwner': isOwner,
      'Label': label,
      'LastSeen': lastSeen,
      'Lat': lat,
      'Lon': lon,
      'PM2_5Value': pM25VAlue,
      'ParentID': parentID,
      'Stats': stats,
      'THINGSPEAK_PRIMARY_ID': tHINGSPEAKPRIMARYID,
      'THINGSPEAK_PRIMARY_ID_READ_KEY': tHINGSPEAKPRIMARYIDREADKEY,
      'THINGSPEAK_SECONDARY_ID': tHINGSPEAKSECONDARYID,
      'THINGSPEAK_SECONDARY_ID_READ_KEY': tHINGSPEAKSECONDARYIDREADKEY,
    };
  }
}

class Stats {
  final int lastModified;
  final double pm;
  final int timeSinceModified;
  final double v;
  final double v1;
  final double v2;
  final double v3;
  final double v4;
  final double v5;
  final double v6;

  Stats(
      {this.lastModified,
      this.pm,
      this.timeSinceModified,
      this.v,
      this.v1,
      this.v2,
      this.v3,
      this.v4,
      this.v5,
      this.v6});

  factory Stats.fromJson(Map<String, dynamic> json) {
    return Stats(
      lastModified: json['lastModified'] as int,
      pm: _toDouble(json['pm']),
      timeSinceModified: json['timeSinceModified'] as int,
      v: _toDouble(json['v']),
      v1: _toDouble(json['v1']),
      v2: _toDouble(json['v2']),
      v3: _toDouble(json['v3']),
      v4: _toDouble(json['v4']),
      v5: _toDouble(json['v5']),
      v6: _toDouble(json['v6']),
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'lastModified': lastModified,
      'pm': pm,
      'timeSinceModified': timeSinceModified,
      'v': v,
      'v1': v1,
      'v2': v2,
      'v3': v3,
      'v4': v4,
      'v5': v5,
      'v6': v6,
    };
  }
}

List _fromList(data, Function(dynamic) toJson) {
  if (data == null) {
    return null;
  }
  var result = [];
  for (var element in data) {
    var value;
    if (element != null) {
      value = toJson(element);
    }
    result.add(value);
  }
  return result;
}

double _toDouble(data) {
  if (data == null) {
    return null;
  }
  if (data is int) {
    return data.toDouble();
  }
  return data as double;
}

List<T> _toObjectList<T>(data, T Function(Map<String, dynamic>) fromJson) {
  if (data == null) {
    return null;
  }
  var result = <T>[];
  for (var element in data) {
    T value;
    if (element != null) {
      value = fromJson(element as Map<String, dynamic>);
    }
    result.add(value);
  }
  return result;
}

/*
Response1:
  "mapVersion": String
  "baseVersion": String
  "mapVersionString": String
  "results": List<Response1Results>

Response1Results:
  "ID": int
  "ParentID": int
  "Label": String
  "THINGSPEAK_PRIMARY_ID": String
  "THINGSPEAK_PRIMARY_ID_READ_KEY": String
  "THINGSPEAK_SECONDARY_ID": String
  "THINGSPEAK_SECONDARY_ID_READ_KEY": String
  "Lat": double
  "Lon": double
  "PM2_5Value": String
  "LastSeen": int
  "Hidden": String
  "isOwner": int
  "AGE": int
  "Stats": String

Stats:
  "v": double
  "v1": double
  "v2": double
  "v3": double
  "v4": double
  "v5": double
  "v6": double
  "pm": double
  "lastModified": int
  "timeSinceModified": int
*/

document.querySelector('img').addEventListener('dragstart', dragstart_handler);
document.querySelector('img').addEventListener('dragend', dragend_handler);
document.getElementById('dropzone').addEventListener('drop', drop_handler);
document.getElementById('dropzone').addEventListener('dragover', dragover_handler);
document.getElementById('dropzone').addEventListener('dragleave', dragleave_handler);

const collectedItems = [];

function dragstart_handler(ev) {
  ev.currentTarget.style.border = "dashed";
  ev.dataTransfer.setData("text", ev.target.dataset.item);
  ev.effectAllowed = "none";
}

function dragover_handler(ev) {
  ev.currentTarget.style.backgroundColor = "lightblue";
  ev.preventDefault();
}

function dragleave_handler(ev) {
  ev.currentTarget.style.backgroundColor = "white";
  ev.preventDefault();
}

function drop_handler(ev) {
  ev.currentTarget.style.backgroundColor = "white";
  collectedItems.push(ev.dataTransfer.getData("text"));
  console.log(collectedItems);
  document.getElementById('items').textContent = `Number of items collected: ${collectedItems.length}`;
  ev.preventDefault();
}

function dragend_handler(ev) {
  ev.target.style.border = "solid black";
  ev.dataTransfer.clearData();
}

#dropzone {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  border: 1px dashed blue;
}