标签: drag-and-drop

我有一个文本框，其中输入了一些文本。此外，我有一个可拖动的 div，我可以将其拖放到文本框上。该 div 的内容在放置时作为文本插入到文本框（附加到末尾）。

现在我希望能够在文本框中操纵光标，以便它跟随鼠标位置，并且文本恰好插入到放置的位置。

我已经有了鼠标 x 和 y ，我知道如何操作插入符，但我不知道如何将这两个结合起来......

预先感谢您的任何建议

我有最新的 ckeditor 版本 4.5.7，带有拖放 API，我有一个情况，我需要将一个小部件从一个编辑器拖放到另一个编辑器。正如这张票所说，建议的功能是静默失败并且不执行任何操作。

ckeditor 票证链接

就我而言，如果将小部件拖动到不同的编辑器，则需要复制小部件；如果将小部件拖动到同一编辑器中，则需要移动小部件。第二种情况已经在工作

关于如何做到这一点有什么想法吗？

editor.on( 'contentDom', function() {
    var dropTarget = CKEDITOR.plugins.clipboard.getDropTarget( editor );
    editor.editable().attachListener( dropTarget, 'drop', function( evt ) {
    // The target may be some element inside the draggable div (e.g. the image), so get the div.h-card.
    var target = evt.data.getTarget().getAscendant( 'div', true );

    // Initialization of CKEditor data transfer facade is a necessary step to extend and unify native 
    // browser capabilities. For instance, Internet Explorer does not support any other data …

我正在尝试向我的项目添加拖放功能，并为此使用slip.js。

为了装饰光标，我添加class="draggable"到每个可拖动的<tr>。这个类的 CSS 是：

.draggable:active { 
  cursor: -webkit-grabbing;
  cursor:    -moz-grabbing;
  cursor:         grabbing;
}

拖放工作正常，但在 Safari 中，当我拖动表格行时，光标看起来像cursor: text

在 Chrome 中，光标正常

有趣的是，当我只需单击并按住而不拖动光标时，在 Safari 中也可以

我尝试在单行中使用 CDK 拖放，它工作得很好，同样，它对于单列也工作得很好，但当我使用flex-wrap: wrap在行和列中显示图块时，它无法正常工作。

这是一个演示 https://stackblitz.com/edit/angular-etbue5

我正在开发一个项目，其中有多个<Image />组件，但遇到了一个问题，即我无法指示用户在任何给定时间正在抓取哪个图像。我首先想到解决这个问题是将图像包装在 a 中TouchableOpacity，onPress 函数将触发并传递图像数据以更新状态 ( this.setState({ currentImage: imageData }))。但这不适用于panResponder. 所以我的问题是，有什么方法可以将数据传递给 panResponder 或者如何让 panResponder 用户正在抓取哪个图像？

class App extends React.Component {

  point = new Animated.ValueXY();

  constructor() {
    super();
    this.state = {
      shapesArr: [],
      isGrabbing: false,
      currentShape: {},
    };
this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        console.log(findNodeHandle(evt.nativeEvent.target));
        this.setState({ …

我正在尝试创建一个表格小部件，我可以在其中删除音频文件并用文件名、文件大小等填充表格。我的代码如下。我还没有实现用于读取 DragEnterEvent 上的元数据的部分，因为该表甚至不接受任何类型的删除。

from PyQt5 import QtCore, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(982, 615)
        MainWindow.setAcceptDrops(True)
        MainWindow.setStyleSheet("background-color: rgb(255, 255, 255);")
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(360, 0, 271, 181))
        self.label.setText("")
        self.label.setObjectName("label")
        self.tableWidget = QtWidgets.QTableWidget(self.centralwidget)
        self.tableWidget.setGeometry(QtCore.QRect(10, 200, 701, 331))
        self.tableWidget.setAcceptDrops(True)
        self.tableWidget.setEditTriggers(QtWidgets.QAbstractItemView.NoEditTriggers)
        self.tableWidget.setDragDropMode(QtWidgets.QAbstractItemView.DragDrop)
        self.tableWidget.setDefaultDropAction(QtCore.Qt.CopyAction)
        self.tableWidget.setSelectionBehavior(QtWidgets.QAbstractItemView.SelectRows)
        self.tableWidget.setShowGrid(False)
        self.tableWidget.setSortingEnabled(True)
        self.tableWidget.setObjectName("tableWidget")
        self.tableWidget.horizontalHeader().setVisible(True)
        self.tableWidget.verticalHeader().setVisible(False)
        self.tableWidget.setRowCount(6)
        self.tableWidget.setColumnCount(6)
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 982, 21))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.titleUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def dragEnterEvent(self, event):
        event.accept()

    def dropEvent(self, event):
        event.accept()

    def titleUi(self, …

我想实现将表格视图单元格拖动到“删除图标”上以将其删除的功能。

现在我的问题是如何将我的类型转换为 NSItemProviderWriting/NSItemProviderReading 以使用拖放。

我正在关注本教程：https://exploringswift.com/blog/creating-a-nsitemprovider-for-custom-model-class-drag-drop-api。虽然我失败了，但我仍然无法理解它是如何工作的。

它说类型“Task”不符合协议“Decodable”。（“Task”是我的自定义模型），我也不知道本教程中的“kUTTypeData”是什么......

任何人都可以帮助如何实施这些协议吗？

import Foundation
import CoreData

@objc(Task)
public class Task: NSManagedObject, NSItemProviderWriting, NSItemProviderReading, Codable {

    public override init(entity: NSEntityDescription, insertInto context: NSManagedObjectContext?) {
        <#code#>
    }

    required public init(from decoder:Decoder) throws {
        let values = try decoder.container(keyedBy: CodingKeys.self)
    }

    public static var writableTypeIdentifiersForItemProvider: [String] {
        return []
    }

    public func loadData(withTypeIdentifier typeIdentifier: String, forItemProviderCompletionHandler completionHandler: @escaping (Data?, Error?) -> Void) -> Progress? {

        let progress = Progress(totalUnitCount: 100)

        do {
            let encoder = JSONEncoder() …

考虑 JavaFX 应用程序内的表格视图。表视图包含有关人员的数据：

id    firstname    lastname

1     John         Doe

表视图的每一行都可以用来实例化一个 Person 对象：

new Person(Integer id, String firstname, String lastname)。

这是我想做的：

我想选择表格视图中的一个人，然后用鼠标将其拖动到文本区域中。在文本区域内我想打印字符串：

1 John Doe。

我知道我必须实现三个函数才能实现此目的：onDragDetected(), onDragOver() and onDragDropped()。

我想从以下开始：

public void onDragDetected(DragEvent dragevent) {
    Person person = tvPersonData.getSelectionModel().getSelectedItem();
}

这有效。但我必须以某种方式让我的 Person 进入 DragBoard 对象 ( dragevent.getDragboard())。我想我是这样的。然后也许我的其他功能可以使用我的拖板内的任何内容。

有人可以帮我从这里出去吗？

I\xe2\x80\x99m 在具有圆角的视图上使用 .onDrag 修改器：

struct RootView: View {\n    \n    @State var dragging: Bool = false\n    \n    var body: some View {\n        VStack {\n            Color.red.cornerRadius(32)\n                .frame(width: 300, height: 300)\n                .onDrag {\n                    dragging = true\n                    return NSItemProvider(object: NSString())\n                }\n        }.frame(maxWidth: .infinity, maxHeight: .infinity)\n        .background(.green)\n    }\n}\n

问题是，当我调用拖动时 - 由于系统应用了自动阴影效果 - 它并不感觉像我自己拖动卡一样。见下文。

有没有什么方法可以让卡片看起来是用透明背景拖动的，而不是在它上面放置的任何背景颜色之上？

我对dnd-kit库有疑问。我正在尝试使用拖动手柄激活器实现可排序列表。问题是我无法将拖动手柄（按钮）设置为仅拖动激活器。相反，整个父元素保持活动状态。

SortableItem成分：

    const SortableItem: FunctionComponent<{ id: string }> = (props) => {
      const {
        attributes,
        listeners,
        setNodeRef,
        setActivatorNodeRef,
        transform,
        transition,
      } = useSortable({ id: props.id });


      const context: Context = {
        attributes: attributes,
        listeners: listeners,
        setActivatorNodeRef: setActivatorNodeRef
      }


      return (
        <SortableItemContext.Provider value={context}>
          <div ref={setNodeRef} {...attributes} {...listeners}>
            {props.children}
          </div>
        </SortableItemContext.Provider>
      );
    }

DragHandle成分：

    export const DragHandle: FunctionComponent = () => {

      const { attributes, listeners, setActivatorNodeRef } = useContext(SortableItemContext);
      return <button type="button"
                     className="DragHandle"
                     {...attributes} {...listeners}
                     ref={setActivatorNodeRef}>
        <svg viewBox="0 …