标签: drag-and-drop

我正在尝试制作一个div可拖动的。该div包含img充当了图像的标签和一些文本。问题是，当我通过点击开始拖动img时，img被拖动的，而不是父母div。我该如何解决？

<div className="container-selected" id={id}
     draggable="true" onDragStart={this.dragStart} onDragEnd={this.drop} onClick={this.click}>
    <img src={status} />
    <span className="beacon-id">Some text</span>
</div>

这是CSS：

.container-selected {
  padding: 10px;
  position: relative;
  z-index: 0;

  img {
    width: 3em;
    z-index: -1;
  }

  .beacon-id {
    position: absolute;
    left: 0;
    top:  53px;
    width: 100%;
    text-align: center;
  }
}

我开发了一个 javascript 拖放，主要使用标准的 'allowdrop'、'drag' 和 'drop' 事件。

我想自定义“幻影”拖动对象，因此我添加了一个 display:none div，它填充了可拖动元素的 innerHTML 并在用户开始拖动时使其可见 (display:block;)。

可拖动的 div 绝对定位并匹配鼠标移动。为此，我需要向 document.body 添加 3 个事件侦听器。它们如下：

document.body.addEventListener('dragover', function (ev) {
    console.log("dragover event triggered");
    ev = ev || window.event;
    ev.preventDefault();
    dragX = ev.pageX;
    dragY = ev.pageY;
    document.getElementById("dragged-container").style.left = (dragX - dragOffsetX) + "px";
    document.getElementById("dragged-container").style.top = (dragY - dragOffsetY - 10) + "px";    
    if (mostRecentHoveredDropTargetId!="") {
        if (dragX<mostRecentHoveredDropTargetRect.left || dragX>mostRecentHoveredDropTargetRect.right || dragY<mostRecentHoveredDropTargetRect.top || dragY>mostRecentHoveredDropTargetRect.bottom) {
            document.getElementById(mostRecentHoveredDropTargetId).classList.remove("drop-target-hover");
            mostRecentHoveredDropTargetId = "";
        }
    }
});

document.body.addEventListener('drop', function (ev) {
    console.log("drop event …

我想将项目拖到我的水平 recyclerview 上（不仅在 recyclerview 的范围内），当放下一个项目时，它会通过动画移动到新位置。如何使用 ItemTouchHelper.Callback 实现这一点？

我正在使用 HTML5 和 JavaScript 进行拖放操作，我想获取拖动元素的 id 和拖动位置的 id。

第一部分很简单，但是将 id 拖到哪里是我的问题。

这是我的代码 HTML ：

<div class="form-group" ondrop="drop(event)" ondragover="allowDrop(event, this)" id="drop1" ondrop="getID(this, ev)" >
<label class="col-sm-12 control-label">Equipe 1</label>
</div>

<div class="form-group"  draggable="true" ondragstart="drag(event)" id="drag5" ondrop="drop(event)" ondragover="allowDrop(event)">
<table>
   <tr>
       <td><img alt="image" class="img-circle" src="img/profile_small.jpg" /></td>
       <td><label class="control-label">Employé 4</label></td>
   </tr>
</table>
</div>

这里是 Javascript：

<script>
            function allowDrop(ev) {
                ev.preventDefault();
            }

            function drag(ev) {
                ev.dataTransfer.setData("text", ev.target.id);
            }

            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("text");
                ev.target.appendChild(document.getElementById(data));
                alert(document.getElementById(data).textContent+" Dropped");
            }
</script>

谢谢

我正在为 RXJS 的拖放行为而苦苦挣扎。我想在 250 毫秒鼠标按下后开始拖动元素，以免劫持该元素上的点击事件。

到目前为止，开始拖动有效，但停止拖动从未被调用。有谁知道为什么？

let button = document.querySelector('.button');

let mouseDownStream = Rx.Observable.fromEvent(button, 'mousedown');
let mouseUpStream = Rx.Observable.fromEvent(button, 'mouseup');

let dragStream = mouseDownStream
  .flatMap((event) => {
    return Rx.Observable
      .return(event)
      .delay(250)
      .takeUntil(mouseUpStream)
  });

let dropStream = mouseUpStream
  .flatMap((event) => {
    return Rx.Observable
      .return(event)
      .skipUntil(dragStream)
  });

dragStream.subscribe(event => console.log('start drag'));
dropStream.subscribe(event => console.log('stop drag'));

JSBin

我花了几天时间尝试了很多不同的东西来完成这项工作，但一直失败。这开始变得令人沮丧，我真的很想知道如何让用户拖放工作以重新排序 NSCollectionView 中的项目的人的想法。这是我的最新尝试，它完全没有任何作用：

let MyItemType = "myItemType"
class CollectionViewController: NSViewController {
@IBOutlet weak var collectionView: NSCollectionView!
let MyItemType = "myItemType"
override func viewDidLoad() {
    super.viewDidLoad()
    configureCollectionView()
    loadDevices()
    getstate()
    // try to register drag and drop (all attempts fail)
    //collectionView.register(forDraggedTypes: [MyItemType, NSFilenamesPboardType]
}
// more functions here were omitted...
}

extension CollectionViewController : NSCollectionViewDataSource {

func numberOfSections(in collectionView: NSCollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: NSCollectionView, numberOfItemsInSection section: Int) -> Int {
    return groupbuttons.count
}

func collectionView(_ itemForRepresentedObjectAtcollectionView: …

我在 swift 4 中使用新的拖放 api。我需要通过长按它来拖动一个单元格并将图像放在视图控制器的视图上。这是在同一个应用中拖拽，因为它需要在iPhone上运行，而这个功能只在同一个应用中的手机上运行。我使用真实设备来测试我所写的内容，但我无法弄清楚为什么一旦我点击了一个单元格就无法拖动它。但是在 iPad 上运行模拟器......它有效，我可以拖动它。我已经查看了苹果的文档，他们指定可以在拖动过程中配置拖动项的外观，但默认情况下，如果不存在委托函数的自定义实现或返回 nil，则将拖动整个单元格；所以它应该仍然有效，它在 iPad 上的模拟器中执行此操作，但不在模拟 iPhone 或真实 iPhone 上执行。代码清单如下。也许有人已经解决了这个问题并且知道如何帮助我。谢谢你。只有相关位：

class DefineRoomPropertiesVC: UIViewController {

//MARK: - Init.
override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white
    setupTopMenuBar()
    setupViews()

    topMenuCollectionView.dragDelegate = self
}
   fileprivate let topMenuCollectionView: TopMenuBarCollectionView = {
    let layout = UICollectionViewFlowLayout()
    let collectionView = TopMenuBarCollectionView(frame: .zero, collectionViewLayout: layout)
    return collectionView
}()

}

extension DefineRoomPropertiesVC: UICollectionViewDragDelegate {
func collectionView(_ collectionView: UICollectionView, itemsForBeginning session: UIDragSession, at indexPath: IndexPath) -> [UIDragItem] { // called when a drag is initiated. …

我正在使用 Angular 7“拖放”的新功能，我遵循了官方文档上的所有步骤：https : //material.angular.io/cdk/drag-drop/overview

但我收到此错误：**

未捕获的错误：模板解析错误：'cdk-drop' 不是已知元素： 1. 如果 'cdk-drop' 是一个 Angular 组件，则验证它是否是该模块的一部分。2. 如果'cdk-drop' 是一个Web 组件，则将'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的'@NgModule.schemas' 以抑制此消息。

**

这是我的 app.component.html 代码：

<cdk-drop cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}} 
  </div>
</cdk-drop>

这是我的 app.component.ts 代码：

import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the …

对于我当前的项目，我正在尝试将拖动元素从一个位置拖动到一个 div 内的另一个位置。为此，我使用了 Angular Material 7 CDK 拖放功能。它在整个页面上拖动，但只想在特定的 div 内拖动。但是我在 Angular Material 7 CDK 拖放中没有看到任何控制边界的选项。

谁能告诉我如何控制材料中的边界或建议其他一些可用于 angular 7 的插件。？

谢谢。

在我的 Angular 拖放下拉列表中，我想向“[cdkDropListEnterPredicate]”函数传递一个额外的参数。默认情况下，它发送一个 CdkDrag 和 CdkDropList，但我有几个下拉列表，所以我只想要一个输入谓词函数。这是我的 .html 文件：

<div class="players" [cdkDropListEnterPredicate]="filledPosition(drag, drop, '1')"
    cdkDropList #fwdLine1="cdkDropList" [cdkDropListData]="f1" 
    [cdkDropListConnectedTo]="[forwardPlayers]" 
    (cdkDropListDropped)="drop($event)">

    <div *ngFor="let fwd of f1" cdkDrag [cdkDragData]="fwd">
        <div class="player">
            <span>{{fwd.number}} {{fwd.name}} {{fwd.position}}</span>
        </div>
    </div>
</div>

这是 .ts 文件中的函数：

filledPosition = (item: CdkDrag<Skater>, list: CdkDropList, line) => {

    if (line == "1") checkLine = this.f1;

    console.log(item, list, line)

    if (checkLine.length >= 3) {
        return false;
    }

    return true;

}