标签: draggable

因此，我有一个 jFrame，在其中构建聊天的主界面窗口。这个 window/jFrame 有几个按钮，每个按钮都显示一个 jDialog （我之前在 Netbeans 中创建的，将 jDialog 拖到父级（？） jFrame 上）。

我的问题是两个窗口都设置为undecorated = true，所以我希望让用户通过单击并拖动窗口的一部分来随意拖动和移动所有窗口（在未装饰时模拟标题栏）

在所有 jFrame 中，我通过以下代码完成了此操作initComponents()：

    final Point point = new Point(0,0);        // Why \'final\' and not simply Point point?     \n    addMouseListener(new MouseAdapter() {  \n        public void mousePressed(MouseEvent e) {  \n            if(!e.isMetaDown()){  \n                point.x = e.getX();  \n                point.y = e.getY(); \n                System.out.println("Rat\xc3\xb3n pulsado: " + point.x + "," + point.y);\n            }  \n        }  \n    });\n\n    addMouseMotionListener(new MouseMotionAdapter() {  \n        public void …

我正在寻找支持多次拖动的拖放库。但是我找不到 angular 2+ 的任何东西。ng2-dragula 支持我们想要的，除了多次拖放。任何人都可以建议任何库或如何覆盖 ng2 dragula 以实现相同的目标。以下是我们正在寻找的功能：

1. 拖动到目标容器中的特定位置
2. 拖动多个项目
3. 在同一个容器内拖动
4. 适用于任何类型的元素
5. 支持复制和移动到目标

我在用react-draggable。

我必须防止元素被拖动到元素之外body，防止文本选择并在可拖动元素内启用表单输入。

import React from "react";
import ReactDOM from "react-dom";
import Draggable from "react-draggable";

function App() {
  return (
    <div className="App">
      <div>Loren ipsum blah blah</div>
      <Draggable bounds='body'>
        <div className="inner">
          <h4>Drag me</h4>
          <textarea/>
          <input />
          <input type='checkbox' />
        </div>
      </Draggable>
   </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

上面的代码将阻止文本选择，但不能使用textarea和。input该复选框确实有效。

我尝试使用enableUserSelectHack={false}来启用内部的表单输入div.inner。尽管输入已启用，但当用户将光标拖动到视口上方时可以选择文本。

有没有办法在使用时限制可拖动元素到主体，禁用文本选择并启用表单输入react-draggable？

我有 Draggable 元素，在它的内部，我有一个带有 onClick 事件的组件。拖动结束时，触发点击事件。我的可拖动元素如下所示。我使用了一个名为react-draggable的包。

<Draggable
    position={this.state.realPosition}
    onStart={this.handleStart}
    onDrag={this.handleDrag}
    onStop={this.handleStop}
    disabled={this.state.isDialogOpen}
    bounds="parent">
      <div style={{"width":"fit-content"}}>
        <Helmet getDialogStatus={this.handleClick} />  
      </div>
</Draggable>

我在 Helmet 组件内有 onClick 事件，它会打开一个对话框。当我拖动并释放该元素时，将打开此对话框。我的问题是如何防止这种行为以及如何将这些事件与事件分开？

谢谢。

我将如何使用纯 SwiftUI 在 Views 或 UIViews 之间添加可拖动的分隔线。甚至可以使用 SwiftUI，还是我必须依靠 UIKit？

带有分隔符的示例屏幕：

我在 SwiftUI 文档中找不到这种东西。即使只是足够的信息来完成左上角的两窗格示例也会很有用。

（这里和这里已经问过类似的问题，但这些问题已经有 5 年和 7 年的历史了，并且处理的是 Objective-C / UIKit，而不是 Swift / SwiftUI）

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

这是使用固定相机位置的示例（不是我的）：https://codepen.io/kao​​lay/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, …

我如何从当前的Draggabe项中获取ID？

<style type="text/css">
    .red{ color: #ff0000; }    
</style>

<script type="text/javascript">
    $(function() {

    $(".dragg li").draggable();


    $("#droppable").droppable({

    hoverClass: 'red',
    over: function(event, ui)
    {
        //  $( --- ID FROM THE CURRENT DRAGABLE LI --- ).css('color','#ff0000');
    },
    out: function(event, ui)
    {
        // $( --- ID FROM THE CURRENT DRAGABLE LI --- ).css('color','#000000');
    }

    });


    });
</script>


    <div class="dragg">
        <li id="b1">Drag me to my target</li>
        <li id="b2">Drag me to my target</li>
        <li id="b3">Drag me to my target</li>        
    </div>

   <div id="droppable"  style="border: 1px solid #000000;">
       <br …

我有表格.我已经启用了表单上的透明度,我删除了它的标题栏和边框.在里面我创建了一个自定义UI,它具有与窗口相同的功能.基本上,我的想法是创建自定义窗口.

一切都按预期工作,但只有窗口拖动不起作用.我不知道如何启用它.我用Google搜索了这个.但我没有找到任何有用的信息.

请帮我实现这个窗口拖动.

当拖动一个元素时,我正在进行一些计算,当某个标准匹配时,我想拖动暂停.

我不想触发鼠标事件,只是暂停.

我在这个JS FIDDLE上有一个完美的例子

请查看容器和矩形列表.我想要达到的目的与遏制有些相反......

如果我将收容设置为.draggable_wrapper,那么我的UL列表将被限制在内...我不想要那样做

我想要的是当我拖动列表时,如果列表位置大于零(> 0)要暂停向右拖动并且只允许向左拖动(所以到负位置)......

我不希望第一个LI的左边界到达集装箱左边界的右侧......

并且在另一侧完全相同的事情......当向左拖动时...我想在8. li的右边界越过容器的右边界时停止(这发生在位置<小于-55px的示例中;

所以要使它更具可读性

$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;

if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;

});

我怎样才能做到这一点？约束时也是如此

我刚开始学习html5,我正在尝试用可拖动的船创建战舰界面.我需要帮助使我的拖动方法有效.我故意不使用库,因为我需要让船只在另一个画布界面(战舰板)上拖拽,我无法弄清楚如何处理Kinetic库.我觉得我很亲近,但我无法弄清楚最后一点.这些船应该被平稳地拖动但是它们在点击时似乎会抓住鼠标的位置......

这是我的clode:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas Drag and Drop Test</title>
    </head>
    <body>
        <section>

            <div align=center>
                <canvas id="canvas" width="550" height="550">
                    This text is displayed if your browser does not support HTML5 Canvas.
                </canvas>
            </div>

            <script type="text/javascript">
                var canvas;
                var ctx;
                var x = 75;
                var y = 50;
                var WIDTH = 550;
                var HEIGHT = 550;
                var dragok = false;
                var ships = [];
                var ship;
                var shipFill = "#FF0000";
                //Definitions
                //Draggable Carrier
                var caRectX = 100; …