标签: drag-and-drop

我在 jQuery 中的拖放方面遇到问题。在我的代码中有一个可拖动的 div。当我将其移动到某个可放置的表格单元格时，div 的克隆将附加到该表格单元格。但是当我拖动克隆时，原始 div 会被移动。这是 drop 时调用的函数：

function(event, ui)
{
    var draggable = ui.draggable.clone(true);  // cloning including attrs and children
    draggable.draggable(); // this is something I tried with no effect
    $(this).empty(); // empty the droppable cell
    $(this).append(draggable); // append the div to the cell
}

我通过谷歌搜索找不到明确的答案。我不知道这是否与此有关，但 div 有一个相对位置（并且需要保持这种状态）。

如何确保克隆可以像原始版本一样被拖动？

基本上，我的应用程序至少需要执行以下操作：

• 拖放
• 缩放和平移
• 图像旋转
• 使用代码操作画布对象的能力
• svg 导入（如果可能的话，但并不重要）

我的要求非常基本，但是我的问题还是这些画布库的功能似乎如此有限？我知道画布规范不是最终版本，但我已经看到了一些令人惊叹的画布项目。

以上只是获取小提琴链接的图像，其作用没有问题。

我正在尝试沿圆移动一个对象（实际上是一个矩形画布，边界半径 = 100%，因此表现为圆）。但只能移动，不能限制圆圈内的移动）

这是我的JS 小提琴链接。注意：请在js代码中向下滚动并查看在以下注释下编写的唯一代码

//---- Code of interest begins-----// 到 //--- 感兴趣的代码结束---//

我想要的输出将像这个轮farbtastic。虽然它是开源的，但我一直无法在我的色轮中使用它的鼠标移动事件代码

在尝试搜索时，我发现Canvas 在圆圈中移动对象， 但我无法使用它，因为我不知道d也不知道是什么across。所以无法得到 thetaarccos(1-(d/r)^2/2)

我正在寻找一种方法将节点从其复合节点中拖出并将其放到另一个节点（然后该节点将成为其新的父节点）。

该示例显示了复合节点中的一些捕获的节点。但我找不到通过 dnd 来“释放”它们的方法。

http://jsbin.com/gist/5b192c88616af2f75344?输出

我还缺少一些 HTML5 事件，例如拖移、拖出等。有办法得到吗？

我尝试使用给定的 cytoscape js 事件来“移动”一些节点，但没有良好的用户体验。

为什么onDragOver在下面的例子中没有发生事件？

如何实现最简单的拖动行为，即没有剪贴板的东西？

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.input.DragEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.paint.*;
import javafx.stage.Stage;

public class DragTry extends Application {

   private Point2D dragVector = null;

   @Override
   public void start(Stage primaryStage) throws Exception {

      Pane root = new Pane();

      Pane node = new Pane();
      node.setBackground(new Background(new BackgroundFill(Color.BLUE, CornerRadii.EMPTY, javafx.geometry.Insets.EMPTY)));
      node.setPrefWidth(100);
      node.setPrefHeight(50);
      node.setTranslateX(200);
      node.setTranslateY(200);

      node.setOnDragDetected(new EventHandler<MouseEvent>() {
         @Override
         public void handle(MouseEvent event) {
            System.out.println("odDragDetected");

            double x = event.getX(); …

I\xc2\xb4m 尝试在拖动相机时进行缓动或惯性，以便当我放下相机时它会缓动到位。我想根据我抛出/拖动相机的力来移动相机。

这是 i\xc2\xb4m 用于拖动相机的实际代码，但其中没有平滑的缓动。

    using UnityEngine;\n    using System.Collections;\n\n    public class swipeCamera: MonoBehaviour\n    {\n        Vector3 hit_position = Vector3.zero;\n        Vector3 current_position = Vector3.zero;\n        Vector3 camera_position = Vector3.zero;\n        float z = 0.0f;\n\n        // Use this for initialization\n        void Start()\n        {\n        }\n\n        void Update()\n        {\n            if (Input.GetMouseButtonDown(0))\n            {\n                hit_position = Input.mousePosition;\n                camera_position = transform.position;\n\n            }\n            if (Input.GetMouseButton(0))\n            {\n                current_position = Input.mousePosition;\n                LeftMouseDrag();\n            }\n        }\n\n        void LeftMouseDrag()\n        {\n            // From the Unity3D docs: "The z position is in world units from the …

我已经在react应用程序中安装了react dropzone。添加组件放置区时，应用程序崩溃，并声称：

TypeError: children is not a function
Dropzone.render
node_modules/react-dropzone/dist/es/index.js:478
475 | var isMultipleAllowed = multiple || filesCount <= 1;
476 | var isDragAccept = filesCount > 0 && 
allFilesAccepted(draggedFiles, this.props.accept);
477 | var isDragReject = filesCount > 0 && (!isDragAccept ||!isMultipleAllowed);
> 478 | return children({
  | ^  479 |   isDragActive: isDragActive,
480 |   isDragAccept: isDragAccept,
481 |   isDragReject: isDragReject,

但是，一切似乎都很好。我的App.js是：

import React, { Component } from 'react';
import DropImg from './components/DropImg.js';

class App extends Component {
render() { …

我正在努力使用 jsPlumb 社区版通过拖放将元素与鼠标连接。

我尝试制作由用户连接的元素流并导出到 Json。

看：https : //stackblitz.com/edit/angular-jsplumb-test-rx8hdy

感谢您的帮助 ！！

我的 Angular 9 项目出现问题，其中拖放功能无法始终如一地工作。每当我尝试将对象拖到其目标位置时，拖放永远不会完成。大多数情况下，对象会返回其原始位置，或者在我要将对象移动到的目标位置之前或之后移动到另一个位置。这是我的代码：

<div class="col-sm-12">

          <div cdkDropList class="example-list cdk-drop-list-receiving" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i }}</div>
                  <div class="col-sm-5 text-center example-box"  style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i].Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="Words[i+1] !== undefined" style="border: …

我有一个自定义的 angular 文件上传组件，我想使用Angular CDK 拖放。它看起来不错，但是当我尝试实现它来处理文件上传（您将文件拖入拖放区）时，它似乎不起作用，浏览器在新选项卡中打开文件。

我现在拥有的看起来像这样：

<label cdkDropList (cdkDropListDropped)="handleFileDrop($event)">
    <span>Drop file here</span>
    <input #fileInput type="file" multiple="false" (change)="addFiles(fileInput.files">
</label>

所以我的问题是，我可以使用 Angular CDK 拖放库执行 FileUploads，如果可以，我在这里缺少什么？