标签: draggable

我对 html5 可拖动项目有疑问。我一直在看这个例子： https: //codepen.io/retrofuturistic/pen/tlbHE

如果我自定义它并使父母可拖动

<ul>
    <li draggable="true" class="parent-li">
        <ul id="columns-1">
            <li class="column child-li" draggable="true"><header>A</header></li>
            <li class="column child-li" draggable="true"><header>B</header></li>
        </ul>
    </li>
    <li draggable="true" class="parent-li">
        <ul id="columns-2" draggable="true">
            <li class="column child-li" draggable="true"><header>A</header></li>
            <li class="column child-li" draggable="true"><header>B</header></li>
        </ul>
    </li>
</ul>

事实证明，当您尝试对列表项“child-li”进行排序时，它会尝试拖动“parent-li”

this.parentNode.removeChild(dragSrcEl);

DragSrcEl 与 this.parentNode 相同：“parent-li”。

那么只要列表项处于同一级别就可以对它们进行排序吗？

我使用本教程制作了一个适合任何视图控制器并显示在屏幕的一半上的 UIPresentationController 。现在我想添加阻力来消除这个问题。我试图让拖动感觉自然且响应灵敏，就像 Apple iOS 13 股票应用程序上“热门故事”的拖动体验一样。我认为 iOS 13 模式拖动关闭会被保留，但它不会转移到这个控制器，但事实并非如此。

我发现的每一点代码和教程都有糟糕的拖动体验。有谁知道如何做到这一点？过去一周我一直在尝试/寻找。先感谢您

这是我的演示控制器代码

class SlideUpPresentationController: UIPresentationController {
    // MARK: - Variables
    private var dimmingView: UIView!
    
    //MARK: - View functions
    override init(presentedViewController: UIViewController, presenting presentingViewController: UIViewController?) {
        super.init(presentedViewController: presentedViewController, presenting: presentingViewController)
        setupDimmingView()
    }
    
    override func containerViewWillLayoutSubviews() {
      presentedView?.frame = frameOfPresentedViewInContainerView
    }
    
    override var frameOfPresentedViewInContainerView: CGRect {
        guard let container = containerView else { return super.frameOfPresentedViewInContainerView }
        let width = container.bounds.size.width
        let height : CGFloat = 300.0
        
        return CGRect(x: 0, y: container.bounds.size.height …

我正在尝试复制 React-beautiful-dnd 教程步骤 4：重新排序列表。据我所知，我已经复制了教程中的代码： https: //egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd

但是，当我运行反应并尝试拖动列表项时，我收到如下错误：Unable to find draggable element with id: task-1

如果我查看 DOM，我肯定可以看到具有该 id 的元素：

我不明白我做错了什么。我将 id 打印到控制台以检查它是否是一个字符串，确实如此。想法？

初始数据.JS

const initialData = {

    tasks : {
        "task-1" : { id : "task-1", content : "Take out garbage"},
        "task-2" : { id : "task-2", content : "Watch show"},
        "task-3" : { id : "task-3", content : "Charge phone"},
        "task-4" : { id : "task-4", content : "Cook dinner"},
    },

    columns : {
        "column-1" : {
            id : …

您好，我正在尝试创建一个 wxApp，它没有默认提供的标题栏（包括最小化、最大化和关闭）图标。我的代码如下： main.h

class MyApp : public wxApp
{
  public:
    virtual bool OnInit();
};

主程序

bool MyApp::OnInit()
{

    MyFrame *prop = new MyFrame(wxT("MyFrame"));
    prop->Show(true);

    return true;
}

myframe.h

class MyFrame : public wxFrame
{
public:
  MyFrame(const wxString& title);
  
  void OnClick(wxMouseEvent& event);

};

myframe.cpp

MyFrame::MyFrame(const wxString& title)
    : wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 130))
{
  MyPanel *panel = new MyPanel(this, wxID_ANY);
  panel->SetBackgroundColour(wxColour(255,255,255));
  MyButton *button = new MyButton(panel, wxID_ANY, wxT("Ok"));

  Connect( wxEVT_LEFT_UP, 
      wxMouseEventHandler(MyFrame::OnClick));

  panel->Centre();
}


void MyFrame::OnClick(wxMouseEvent& event) 
{
  std::cout << "event …

我创建了一个带有可拖动行的可拖动拖放表。

为了满足我的项目的需要，我添加了多个带有多个 Droppable元素的放置目标，如下例所示： https ://codesandbox.io/s/ql08j35j3q

它工作得很好，但有一个问题，即滚动速度。
当我尝试将项目放入页面底部的元素中时，速度变得非常慢。

这张 GIF 就可以说明问题。

您有任何解决方案的线索吗？

在 Swing 中，我用来JSplitPane创建一个左侧（前导）具有树视图的区域和一个右侧（尾随）具有十六进制查看器的区域，用户可以在其中移动分隔线来调整每个获得的空间。

由于 Jetpack Compose 仍然相对较新，因此诸如SplitView（此类组件的假设名称遵循其命名方案）之类的基本组件尚不存在。我能看到的最接近的概念是RowandColumn但这些用户不能调整大小（据我所知。）

如果不嵌入 Swing JSplitPane，然后在分割窗格的每一侧嵌入 Compose 组件，是否有一个好的方法可以做到这一点？

我找到了一个例子，成功了 90%，但是有一些被删除的 API 很难找到替代品，因为发行说明似乎没有提及它。（！！）

在我最近开始的项目中，我想使用vue.draggable.next。所以我在 nuxt 插件目录中创建了一个“.js”文件，并添加了如下代码。

import VueDraggableNext from "vue-draggable-next";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDraggableNext);
});

然后我在我的一个组件中使用了它，如下所示，

<template>
  <div class="h-full w-full border-2 border-dashed rounded-lg p-5 flex">
    <div class="flex w-1/6 h-full">
      <ComponentPalette />
    </div>
    <VueDraggableNext
      v-model="form.children"
      group="people"
      @start="isDragOver = true"
      @end="isDragOver = false"
      item-key="id"
      class="flex flex-col w-5/6 h-full border-blue-700 border-2 border-dashed rounded-lg p-5 space-y-5"
    >
    <template #item="{element}">
    <FormBuilder
        :component="element"
        @update="update"
      />
   </template>
      
    </VueDraggableNext>
  </div>
</template>

<script setup>
import FormBuilder from "~~/components/dynamic-components/FormBuilder.vue";
import ComponentPalette from "~~/components/form-builder/ComponentPalette.vue";
import { v4 as uuidv4 } …

如何阻止div移出边界div

这是我到目前为止的代码.

  <script>
 $(document).ready(function() {
 $("#draggable").draggable({ grid: [50, 20] });
  });
  </script>
  <div id="drag_border">
  <div id="draggable" style="width:500; height:800">Drag me</div>
  </div>

谢谢,

我正在尝试编写应用程序.这将允许用户从一个拖动NSButton到另一个.丢弃时,我希望将标题放在按钮上.

我无法找到一种NSButton可拖延的方法.可能吗？

我在做克朗代克游戏。逻辑全部正常。我在用javafx中的UI遇到麻烦。

我一直在尝试将卡从“桌面堆”区域移动/拖动，但没有得到预期的结果。我的卡是一个ImageView，里面有一个Image。卡位于窗格中：

Pane tableau = new Pane();
for (int i = 0; i < n; i++) {
    Image img = new Image("resources/images/" + (i + 1) + ".png");
    ImageView imgView = new ImageView(img);
    imgView.setY(i * 20);
    //imgView Mouse Events here
    tableau.getChildren().add(imgView);
}

我试过了：

imgView.setOnMousePressed((MouseEvent mouseEvent) -> {
    dragDelta.x = imgView.getLayoutX() - mouseEvent.getSceneX();
    dragDelta.y = imgView.getLayoutY() - mouseEvent.getSceneY();
});
imgView.setOnMouseDragged((MouseEvent mouseEvent) -> {
    imgView.setLayoutX(mouseEvent.getSceneX() + dragDelta.x);
    imgView.setLayoutY(mouseEvent.getSceneY() + dragDelta.y);
});

该解决方案不起作用，因为我正在设置位置，因此释放卡时不会回到原来的位置，而且卡正在与其他UI对象碰撞。

另一尝试：

imgView.setOnDragDetected((MouseEvent event) -> {
    ClipboardContent content = new ClipboardContent(); …