标签: drag

我有一个大的html5画布(比屏幕大得多),我想实现一个"谷歌地图"拖动.我希望画布可以通过鼠标拖动,我希望它每次拖动时只渲染我们可以在屏幕上看到的部分.有人有个好主意吗？

我有一些使用HTML Drag接口的 React组件。

特别是，我侦听dragover一个组件上的事件，并使用DataTransfer对象设置x和y位置。然后，我侦听dragleave不同组件上的事件，并从DataTransfer中检索x和y位置。

我正在使用Jest和Enzyme来测试我的组件。

如果我运行测试，则会出现此错误：

Test suite failed to run
ReferenceError: DataTransfer is not defined

据我了解，Drag接口在Jest中不可用，因此我需要对其进行模拟，并（也许？）通过Jest globals使它可用。

现在，我DataTransfer在自己的代码中定义jest.config.js并使其成为全局变量，但是我不确定这是否是最佳解决方案。

class DataTransfer {
  constructor() {
    this.data = { dragX: "", dragY: "" };
    this.dropEffect = "none";
    this.effectAllowed = "all";
    this.files = [];
    this.img = "";
    this.items = [];
    this.types = [];
    this.xOffset = 0;
    this.yOffset = 0;
  }
  clearData() {
    this.data = {};
  }
  getData(format) {
    return this.data[format]; …

我已经用 HTML 和 Javascript 为 iPhone 和 Android 编写了一个 web 应用程序，其中涉及拖放图像。

您可以通过将手指放在图像上大约一秒钟来启动拖动。但是，Android 会弹出消息，让我可以选择保存图像、将其设置为墙纸等。

如何防止 Android 这样做？有我可以使用的元标记吗？一些javascript？

我正在尝试实现一个场景，其中两个 Qt 窗口将并排放置，并且它们会相互粘在一起。通过拖动其中一个，另一个也被拖动。即使在执行 alt-tab 时，它们也应该像单个窗口一样运行。

任何帮助或指针都会非常有帮助。

-苏米亚

请参阅小提琴:http://jsfiddle.net/mrcarllister/Z2GjN/

基本上,当您单击并拖动锚点/链接时,我点击拖动滚动功能除外.

它似乎只是当鼠标光标保持在释放链接上时,遵循URL(例如,如果你拖得足够远,链接离开窗口,那就可以正常工作.)

;(function($){ 

$.fn.scrollsync = function( options ){
var settings = $.extend(
        {   
            targetSelector:':first',
            axis: 'xy'
        },options || {});


function scrollHandler(event) {
    if (event.data.xaxis){
        event.data.followers.scrollLeft(event.data.target.scrollLeft());
    }
    if (event.data.yaxis){
        event.data.followers.scrollTop(event.data.target.scrollTop());
    }
}

settings.target = this.filter(settings.targetSelector).filter(':first');
settings.followers=this.not(settings.target); // the rest of elements

settings.xaxis= (settings.axis=='xy' || settings.axis=='x') ? true : false; 
settings.yaxis= (settings.axis=='xy' || settings.axis=='y') ? true : false;
if (!settings.xaxis && !settings.yaxis) return;  

settings.target.bind('scroll', settings, scrollHandler);

};

})( jQuery ); 

;(function($){




$.fn.dragscrollable = function( options ){

var settings …

目前我有一个带有多个可选行的剑道网格。我的问题是，由于 Kendo 的拖动行选择功能，我无法从任何列中选择文本。有没有办法禁用 Kendo Grid 中的拖动行选择？

非常感谢

我想在长按后拖动我的自定义按钮 QML。我已经实现了这种行为，但是问题是在启用后drag，我需要再次按下按钮才能真正开始拖动。如果我想在长按后不松开而移动按钮，我应该如何实现这种机制？

这是我的按钮代码（onReleased并且onLongPressed是我自己的信号）：

ButtonWidget.SoftButtonUI
{
    id:softButtonDelegate2
    x:500
    y:300
    labelText: "button"
    iconImageSource: path
    isGrayedOut: false

    Drag.active: dragArea2.drag.active
    Drag.hotSpot.x: 10
    Drag.hotSpot.y: 10
    onReleased:
    {
        console.log("onClicked")
    }

    onLongPressed:
    {
        console.log("onLongPressed")
        dragArea2.enabled = true
    }

    MouseArea {
        id: dragArea2
        enabled: false
        anchors.fill: parent
        drag.target: parent
        onReleased: parent.Drag.drop()
        onClicked: {
            console.log("MouseArea onClicked")
        }
        onPressAndHold: {
            console.log("MouseArea  onPressAndHold")
        }
    }
}

任何的想法？

我用来OnMouseDrag()更改屏幕上对象的相机视图。代码如下：

void OnMouseDrag() {    
if (isGameOver) {           
return;         
}       
float rotSpeed = GameConst.rotateSpeed * 20.0f ;
float rotX = Input.GetAxis("Mouse X") * rotSpeed * Mathf.Deg2Rad;
float rotY = Input.GetAxis("Mouse Y") * rotSpeed * Mathf.Deg2Rad;
transform.RotateAround(Vector3.up, -rotX);      transform.RotateAround(Vector3.right - Vector3.forward, -rotY);
}

然后我用来button.OnClick().AddListerner()在单击按钮时附加一个函数。

问题是，每次当我完成拖动时，如果鼠标向上的位置在按钮区域中，按钮也会调用该OnClick()函数。OnClick()当只是拖动操作时如何禁用？

我知道 cdk 拖放可以很好地处理列表，并且有很多示例。

但我想做的是，

一侧是列表，另一侧是容器。容器中的物品应该位于容器中的任何位置，并且可以由 x 和 y 轴固定。

因此，当从列表中拖放到容器中的某个 (x,y) 时，该项目应保持该位置。

请帮助我。如果可能，请提供代码示例。

我在 Angular 中使用ngx-owl-carousel-o库。每个轮播项目都被创建为一个带有（点击）事件的 div。我遇到的问题是，在拖动轮播时，它总是会不合需要地触发点击事件，即点击应该只在不拖动时触发。

<owl-carousel-o [options]="customOptions" (dragging)="on_carouselDrag($event.dragging)">
    <ng-container *ngFor="let item of items">
        <ng-template carouselSlide>
            <div (click)="on_itemSelected(item)">
                <!-- ... -->
            </div>
        </ng-template>
    </ng-container>
</owl-carousel-o>

我已经制定了一个似乎有效的解决方案，但我不确定它是否适合使用setTimeout. 我基本上只是用它来延迟结束on_carouselDrag以确保on_vendorSelected首先触发。

on_itemSelected(item: string): void {
  if(!this.isDragging){
    // ...
  }
}

on_carouselDrag(dragging: boolean){
  setTimeout(() => {
    this.isDragging = dragging;
  }, 10 )
}

如果可以改进这种方法，将不胜感激。