小编Kor*_*ako的帖子

拖动事件不会在Firefox或IE中触发

在Chrome中,会触发拖动事件并将其记录到控制台.在Firefox和IE中,它没有.

<html>
<head>

<style>
  #d {
    width:20px;
    height:20px;
    background-color: red;
  }
</style>

</head>
<body>

<div id="d" draggable="true"></div>

<script>
    d = document.getElementById('d');
    d.addEventListener('dragstart', function(e){
      console.log("dragstart:", e);
    });
    d.addEventListener('drag', function(e){
      console.log("drag:", e);
    });
</script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

小提琴版:http://jsfiddle.net/korimako/e1wqafyr

如何设置div来发送拖动事件并正确地听取它们？

javascript html5 draggable

Kor*_*ako

2015 01-06

6
推荐指数

1
解决办法

3526
查看次数

如何使用可以通过轨道控制移动的正交相机在react-三/光纤中拖动在x和z上约束在y上的对象？

我希望能够使用 React-三纤维和正交相机在画布中将对象拖动到平面上（想象一下棋盘上的棋子）。

这是使用固定相机位置的示例（不是我的）：https://codepen.io/kaolay/pen/bqKjVz

但我也希望能够移动相机 - 所以我添加了轨道控件，当拖动对象时该控件将被禁用。

我这里有一个代码沙箱，我的尝试基于许多其他示例： https://codesandbox.io/s/inspiring-franklin-2r3ri ?file=/src/Obj.jsx

主要代码位于两个文件中，App.jsx 以及画布、相机和轨道控件。Obj.jsx 包含被拖动的网格以及使用手势 useDrag 函数内部的拖动逻辑。

应用程序.jsx

import React, { useState } from "react";
import { Canvas } from "@react-three/fiber";
import Obj from "./Obj.jsx";
import { OrthographicCamera, OrbitControls } from "@react-three/drei";
import * as THREE from "three";

export default function App() {
  const [isDragging, setIsDragging] = useState(false);

  return (
    <Canvas style={{ background: "white" }} shadows dpr={[1, 2]}>
      <ambientLight intensity={0.5} />
      <directionalLight
        intensity={0.5}
        castShadow
        shadow-mapSize-height={512}
        shadow-mapSize-width={512}
      />

      <mesh rotation={[-Math.PI / 2, 0, …

Run Code Online (Sandbox Code Playgroud)

draggable coordinate-transformation three.js react-three-fiber react-use-gesture

Kor*_*ako

2021 10-02

3
推荐指数

1
解决办法

8759
查看次数