标签: drag-and-drop

我花了很多时间来解决一个问题。如何让事件可编辑，但不启用拖放功能。我可能找到了一个很酷的解决方案。使用“revertFunc();”

revertFunc();

该函数用于 eventDrop 事件的每个事件。代码是：

    eventDrop: function(event, delta, revertFunc) {
        revertFunc();
    },

当事件被放下时，他回到原来的位置=>拖放被禁用，但点击的可能性仍然存在^^。

享受。

因此，我几乎遵循了我能找到的所有示例，了解如何将 WPF 控件上的拖/放效果设置为“无”以显示带有线条符号的圆圈，但无济于事。

这是我从各种示例中复制的代码，对其进行修改以使其正常工作：

这是窗口背后的代码：

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Input;

    namespace TreeViewWithCheckBoxes
    {
        public partial class Window1 : Window
        {
            public Window1()
            {
                InitializeComponent();

                FooViewModel root = this.tree.Items[0] as FooViewModel;

                base.CommandBindings.Add(
                new CommandBinding(
                    ApplicationCommands.Undo,
                    (sender, e) => // Execute
                    {                        
                        e.Handled = true;
                        root.IsChecked = false;
                        this.tree.Focus();
                    },
                    (sender, e) => // CanExecute
                    {
                        e.Handled = true;
                        e.CanExecute = (root.IsChecked != false);
                    }));

                this.tree.Focus();
            }

            private void TreeViewItemDragEnter(object sender, DragEventArgs e)
            {
                e.Effects = DragDropEffects.None;
                if (e.Data.GetDataPresent(typeof(FooViewModel))) …

我试图ListView 通过拖放重新排序，它在使用静态项目时与我一起工作，但是当我使用itemsSorce绑定数据时绑定数据时，拖动工作正常，但我无法删除该项目，这是我的代码

C＃：

lstSrvMenu.ItemsSource = Menue.MainItems.Where(m => int.Parse(m.GroupID) > 0);

XAML：

<ListView Name="lstSrvMenu" Margin="0,40,0,0" AllowDrop="True" CanDragItems="True" CanReorderItems="True" IsSwipeEnabled="true">
    <ListView.ItemTemplate>
      <DataTemplate>
         <TextBlock Text="{Binding GroupTDesc}" TextWrapping="WrapWholeWords" VerticalAlignment="Center" HorizontalAlignment="Left"/>
      </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

我的网页上有这样的结构：

<div> I have dragenter, dragover, drop, and dragleave handlers
  <div> Lots of nice content
  <iframe src="somethingCoolFromSomeoneElse"></iframe>
</div>

请在此处查看演示： https://codepen.io/glenpierce/pen/JLoJdJ?page =1&

我的问题是，当用户将某些内容拖放到父 div 中时，如果他们碰巧将鼠标悬停在 iframe 上，iframe 会窃取 drop 事件。

如何防止属于放置目标子级的 iframe 窃取其父级的放置事件？

我尝试过：
1.用另一个具有position:relative; height:100%; width:100%;.
2. 提高父级的 z-index。
3. 增加我试图隐藏 iframe 的 div 的 z-index。

我可以尝试在拖动事件开始时隐藏 iframe，但这会以令人困惑的方式改变 UI。

我不使用jquery。

我正在使用 Angular Material CDK，特别是拖放功能，我想知道是否有任何方法可以将子 div 之一设置为不可拖动，同时仍然允许拖动父 div ？

    <div cdkDropList (cdkDropListDropped)="drop($event)">
        <div cdkDrag class="section" *ngFor="let section of sections">
            <sectionComponent dynamically appended trough a factory>
        </div>
    </div>

每个部分组件都可以拖动到父 cdkDropList 中。这是一个部分的结构。

    <div class="sectionContainer">
        <div class="sectionParam">
        </div>
        <div class="sectionContent">
        </div>
    </div>

我想要的是能够拖动整个部分，但前提是拖动的来源来自sectionContent div。我的 paramSection 中有一些滑块导致拖放功能出现问题。

谢谢你的时间。

我想知道何时将元素拖放到其父级之外：

element.addEventListener('dragend', function(event) {
  // check if element is dropped outside its parent
}, false)

我正在寻找一个教程，教我如何在Nuxtjs的项目中实现像Vue-draggable smooth-dnd这样的拖放效果 。对于样式，我使用 Tailwind CSS。

我一直在尝试为 React 实现一个名为dnd-kit的拖放库。

我一直在使用覆盖排序列表指南的帮助下研究一个非常基本的示例，但它不起作用，我不知道我做错了什么。

这是沙箱代码

动画无法正常工作，如果我与第一行交互，它就会冻结并完全停止工作。

有什么帮助吗？

经过一段时间的使用和作者的一些输入后，我让它工作得更好了一些，并发现组件 DragOverlay 导致了我目前无法解决的问题。

如果 DragOverlay 被删除或移动到 DndContext 之外，它可以很好地排序，但没有覆盖效果。

我有一个组件当前使用useDrag钩子连接到react-dnd。除了预览之外，它运行良好。我想实现useDragLayer来看看它是否能帮助解决我的预览问题，正如许多在线线程所建议的那样。

这是我当前的（简化的）useDrag 实现：

const [{ isDragging }, connectDragSource, connectPreview] = useDrag({
  item,
  collect: monitor => ({
    isDragging: monitor.getItem()?.index === item.index,
  })
})

return (
  <Wrapper ref={connectPreview} isDragging={isDragging}>
    <DragHandle ref={connectDragSource} />
  </Wrapper> 
)

在这种情况下，我该如何使用useDragLayer，以有助于我的预览？文档示例对我来说毫无意义......

如何使用useDragLayerapi 连接渲染的组件？useDragLayer不返回拖动源和预览连接器函数（就像useDrag在返回数组的索引 1 和 2 上所做的那样），并且其收集函数也不提供DragSourceConnector实例。那么调用钩子/返回值后我该如何处理呢？

我们有以下代码示例：

function DraggableText({ x, y, text }) {
    const [position, setPosition] = React.useState({ x: x, y: y });
    const [isDragging, setIsDragging] = React.useState(false);
    const [mouseOffset, setMouseOffset] = React.useState({ x: 0, y: 0 });
  
    const handleMouseDown = (event) => {
      event.preventDefault();
      setIsDragging(true);
      setMouseOffset({
        x: event.clientX - position.x,
        y: event.clientY - position.y,
      });
    };
  
    const handleMouseUp = (event) => {
      setIsDragging(false);
    };
  
    const handleMouseMove = (event) => {
      if (isDragging) {
        setPosition({
          x: event.clientX - mouseOffset.x,
          y: event.clientY - mouseOffset.y,
        });
      } …