标签: drag-and-drop

我想在面板上拖动控件,拖动时我想移动控件并将其位置放到面板上.我已经尝试过mouseUp,mouseDown,MouseMove控件事件.但这不是我要找的东西.我想在面板上触发DragDrop事件并移动控件.我可以这样做吗？如果你能给我一个想法,它会很棒.以下是我的代码的一部分.请指正.非常感谢.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace DragnDrop
{
    public partial class Form1 : Form
    {

        public Form1()
        {
            InitializeComponent();
        }
        Control mycontrol;
        int x, y;
        //Form1 f = new Form1();
        private void Form1_Load(object sender, EventArgs e)
        {

            foreach (Control c in this.panel1.Controls)
            {
                c.MouseMove += new MouseEventHandler(lblDragger_MouseMove);
                c.MouseUp += new MouseEventHandler(lblDragger_MouseUp);
                c.MouseDown += new MouseEventHandler(pictureBox1_MouseDown);
                c.MouseDoubleClick += new MouseEventHandler(pictureBox1_MouseDown);
            }
            panel2.AllowDrop = true;
            foreach (Control c in this.panel2.Controls) …

我试图通过jQuery编写我自己的简单AJAX图像上传脚本.我找到了一些插件,但它们太过于根据需要进行定制,我无法让它们正常工作.

我只是想以某种方式检测用户何时将图像拖放到页面上.从那里我确定上传那些数据并进入/ cache /目录并允许更多选项并不困难.

但是现在我完全陷入了拖放功能.字面上不知道我应该如何处理这个问题.需要什么样的事件处理程序？我是否需要自定义自己的事件处理程序代码？任何建议都不仅仅是值得赞赏的

我有一个自定义mime类型,我打算用它来拖放应用程序中的应用程序对象.这似乎工作,但我发现EditText字段也接受放置操作.我不希望这种情况发生.

首先,我已经定义了如下的custome mime类型:

public static final String MIME_TYPE_MYNODE = "com.example.mockup/mynode";

然后,在源对象的onTouch处理程序中,我有:

  @Override
  //-----------------------------------------------------------------------------
  public boolean onTouch (View v, MotionEvent e)
  {
    ...
    else if (e.getAction() == MotionEvent.ACTION_MOVE)
    {
      String[] mimeTypes = {MIME_TYPE_MYNODE};
      ClipData data = new ClipData ("Task Tamer Note", mimeTypes, new ClipData.Item ("unused"));
      View.DragShadowBuilder shadow = new View.DragShadowBuilder(this);
      Object localState = v;
      startDrag (data, shadow, localState, 0);
      return false;
    }
  }
  ...
}

当我"删除"EditText小部件时,它会在文本区域中插入"unused".我怎么能阻止这个？谢谢.

如果鼠标按钮在已触发的元素之外释放，则不会触发Javascript事件onmouseup。onmousedown

这会导致 JQuery UI 中的拖放错误：当鼠标按钮在其容器外部释放时，JQuery可拖动元素不会停止拖动（因为该元素在到达其父边界时将停止移动）。重现步骤：

• 转到http://jqueryui.com/draggable/。
• 向下拖动可拖动对象，直到鼠标离开周围的容器
• 释放鼠标按钮（此时没有按下鼠标按钮）
• 将鼠标移回容器中
• 并且可拖动对象仍在被拖动。我希望一旦释放鼠标按钮，拖动就会停止 -无论在何处释放。

我在最新的 Chrome 和 IE 中看到了这种行为。

有什么解决方法吗？

mouseout我知道我们可以停止在或上拖动容器mouseleave，但我想继续拖动，即使我在父容器之外，就像在谷歌地图中一样（无论您在哪里释放鼠标，它总是停止拖动地图）。

我正在使用这个lvlDragDrop插件.它不适用于移动平台.在github上,他们已经添加了这个问题.但我还是没有运气.

Github演示

HTML

<div ng-controller="ddController" style="margin-top:50px;">
            <div class="row">
                <div class="col-md-1 col-md-offset-1">
                    <p>Click and drag a color onto the grid to the right</p>
                    <div class="peg green" x-lvl-draggable="true" data-color="green">Green</div>
                    <div class="peg red" x-lvl-draggable="true" data-color="red">Red</div>
                    <div class="peg blue" x-lvl-draggable="true" data-color="blue">Blue</div>
                    <div class="peg black" x-lvl-draggable="true" data-color="black">Black</div>
                    <div class="peg grey" x-lvl-draggable="true" data-color="grey">Grey</div>
                </div>

                <div class="col-md-10">
                    <div ng-repeat="r in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">
                        <span class="slot circle" ng-repeat="c in [1, 2, 3, 4, 5, 6, 7, 8, …

情况:我正在使用HTML5拖放将瓷砖放在我正在编写的游戏中.我想添加一个效果,其中两个瓷砖,我即将放置一个新的瓷砖之间稍微移动,以表明这是你正在下降的地方(类似于Mac OS底座).

我的方法:我有一个flexbox我正在丢弃这些瓷砖的东西.我写了一个函数,基本上返回一个正弦波周期,我用它来更新丢弃的瓷砖right:和top:CSS属性(瓷砖position: relative;),基于它们相对于鼠标的原始位置drag.

  // Update occupant style for desired effect
  occupants.forEach(function(occupant, index) {
    $(occupant).css({'right' : -10 * nudgeSine(occupantsMouseOffset[index] * 10) + 'px',
                     'top' : -10 * Math.abs(nudgeSine(occupantsMouseOffset[index] * 10)) + 'px',
                     'opacity' : 1 - Math.abs(nudgeSine(occupantsMouseOffset[index])) });
  });

  // Function to return 1 period of a sine wave
  function nudgeSine(x) {
    if (x < -3.14159 || x > 3.14159) {
      return 0;
    } else {
      return Math.sin(x); …

我在使用 Angular CDK 中的拖放模块时遇到了问题。我在容器 div 中使用它，它具有（除其他外）以下 CSS 属性：

display: flex;
flex-wrap: wrap;

该flex_wrap属性位于此处，以便如果包含的可拖动元素不适合容器，则它们会换行到第二行，依此类推。

由于拖动是水平的 ( cdkDropListOrientation="horizontal")，当所有元素都适合一行时，这可以正常工作，但是一旦它们换行到第二行，拖放就会变得有问题。我做了以下 stackblitz 来重现错误：https ://stackblitz.com/edit/angular-fytgp6 。

如果有人知道如何解决此问题或考虑解决此问题的方法，那将有很大帮助！

使用@angular/cdk 7.2.1：如果定义一个包含 cdkDropList 和嵌套的 cdkDrag 组件列表的父组件，则在嵌套的子组件中定义 cdkDragHandle 不起作用。如果相同的结构都在同一个组件中，则 cdkDragHandle 可以完美地工作。

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

即使没有在与 cdkDrag 相同的组件中定义，是否有人找到了使 cdkDragHandle 工作的修复程序？

我有一个场景，我有多个带有标题的容器，然后是将在 vue.draggable 和页脚上使用的列表。

我已经设法将列表部分放在多个容器之间进行拖放操作，但前提是我将它们放在容器的列表区域中。

我的理想情况是可以在整个容器中放置，这样我也可以在页眉/页脚中放置一个列表项（可能默认将其添加到列表的位置 0）。

我已经尝试在列表项和父 div 上创建额外的 vue.draggable 自定义标签，但它没有帮助，因为现在我们可以拖动整个父 div。

这是我拥有的几个容器的基础的 vue 模板：

<template>
  <div class="container">
    <div class="header">
      <p>{{header}}</p>
    </div>
    <div class="body">
      <draggable class="drag-area" :list="items" group="default">
        <div v-for="item in items" :key="item.id">
          <drag-item :item="item"></drag-item>
        </div>
      </draggable>
    </div>
    <div class="footer">
      <p>{{footer}}</p>
    </div>
  </div>
</template>

有什么办法可以将拖动项拖到整个容器中吗？即把它放在页眉/页脚中？

我正在使用 vue 2.6.10 和 vuedraggable 2.23.0

该@drop监听器不会为我工作。它不会调用我告诉它调用的方法。

我想拖动芯片并能够将其放在另一个组件上，并执行一个功能，但是在放下芯片的时候，dropLink方法没有执行，所以我假设@drop事件没有发出。

控制台上不会显示任何错误。

其余事件运行良好，例如@dragstart.

这是我使用的组件的代码：

<template>
  <div
    @keydown="preventKey"
    @drop="dropLink"
  >
    <template
      v-if="!article.isIndex"
    >
      <v-tooltip bottom>
        <template v-slot:activator="{ on }">
          <v-chip
            small
            draggable
            class="float-left mt-2"
            v-on="on"
            @dragstart="dragChipToLinkToAnotherElement"
          >
            <v-icon x-small>
              mdi-vector-link
            </v-icon>
          </v-chip>
        </template>
        <span>Link</span>
      </v-tooltip>

      <v-chip-group
        class="mb-n2"
        show-arrows
      >
        <v-chip
          v-for="(lk, index) in links"
          :key="index"
          small
          outlined
          :class="{'ml-auto': index === 0}"
        >
          {{ lk.text }}
        </v-chip>
      </v-chip-group>
    </template>

    <div
      :id="article.id"
      spellcheck="false"
      @mouseup="mouseUp($event, article)"
      v-html="article.con"
    />
  </div>
</template>

<script>
export default {
  name: …