drag quickcocos_如何实现单指drag和双指drag - CSDN
  • 演示如何在 Qt Quick 中使用 drag and drop

        研究了一下 Qt Quick 里的 drag and drop 功能,大概讲一下。

    类库

        Qt Quick与 drag and drop 相关的,有这么几个类库:

    • DropArea
    • DragEvent
    • Drag

    DropArea

        DropArea 其实是个方便类,它不可见,但是定义了一个可以接收拖放的区域。它的 entered 信号在有物体被拖入区域时发射,exited 信号在物体被拖出区域时发射,当物体在区域内被拖着来回移动时会不断发射 positionChanged 信号,当用户释放了物体,dropped 信号被发射。

        containsDrag 属性是个布尔值,指示自己的辖区内当前是否有物体被拖动。我们可以根据这个来显示点什么来表示拖动,待会的实例会用到。

        DropArea 还有一些属性,不提也罢,用到了看帮助吧。

    DragEvent

        DragEvent ,看名字想必也能想到它是干什么的了。没错,它就是描述一个拖动事件的相关信息的, DropArea 的 entered 、 positionChanged 、 dropped 信号的参数都是 DragEvent 。

        DragEvent 属性很多,我们挑几个说说吧。

    • accepted :表示是否接受事件的布尔值,如果你处理了 entered 信号,需要把它设置为 true 。
    • x , y :拖动事件的位置,你可以根据它来显示点什么,我们的实例显示了一个如影随形的矩形。
    • action : 拖动来源正在执行的动作的标识,有 Qt.CopyAction 、 Qt.MoveAction 、 Qt.LinkAction 、 Qt.IgnoreAction四种,望文生义即可。
    • proposedActions :建议的动作集合。
    • supportedActions :来源支持的动作集合

        其它的属性还有 hasColor 、 hasUrls 、 hasText 、 hasHtml 等等与 MIME 相关的属性用来判断在拖动时是否携带了某种数据,对应的就有 colorData 、 urls 、 text 、 html 等属性表示实际的数据。

        DragEvent 还定义了一些方法:

    • accept(Action) :调用它可以接受某一个动作,比如你接受 Qt.CopyAction 
    • accept() :接受拖动事件,表明你处理了这个事件了。
    • acceptProposedAction() : 接受被拖动物体(来源)建议的动作
    • getDataAsString(format) :获取某个格式对应的数据并转换为字符串,我们的实例里用这个来提取传输的数据

    Drag

        Drag 这个类一般是附着在可能被拖动的 Item 上,用来设置一些拖动相关的信息。

        它提供很多附加属性,挑一些解释一下:

    • active :指示当前是否处在拖动状态。我们可以把这个属性和一个 MouseArea 的 drag 属性绑定,这样当用户拖动鼠标时就会产生拖动事件。当然你也可以手动设置它为 true ,那样会以被拖动 Item 的当前位置产生一个拖动进入事件。如果你设置 active 为 false ,会产生一个拖动离开事件。
    • dragType :一个枚举值,表示拖动类型,可以是 Drag.None(不自动开始拖动)、Drag.Automatic(自动开始拖动)、Drag.Internal(自动开始前向兼容的拖动)。我们用到了这个,待会儿看代码就明白了。
    • mimeData : 存放MIME数据以及自定义数据,可以传递给 DropArea 。Qt Quick 会把 mimeData 定义的数据打包到 DragEvent 里,带着它四处旅行,谁感兴趣都可以看看。
    • supportedActions :指定支持的动作。对应 DropArea 收到的 DragEvent 的 supportedActions 。
    • proposedActions : 指定推荐的动作。对应 DropArea 收到的 DragEvent 的 proposedActions 。
    • source : 指定拖动的来源对象
    • target :当 active 为 true (拖动处于活跃状态)时,这个属性保存被拖动物体进入的那个 DropArea ,如果被拖动物理和谁都没交集,那它就为 null 。如果拖动没被激活,那它保存最后一个接受 drop 事件的对象,要是没人招惹过被拖动物体,那 target 就为 null

        Drag 还有一些附加信号,可以让我们对拖动的过程增进了解,比如 dragStarted 、 dragFinished 。

        Drag 也提供了一些方法,如 cancel 、 drop 、 start 、 startDrag ,允许我们手动控制拖动。

     拖放色块示例

        阿猿,上代码咧。

    示例逻辑及效果

        等等,先看下粗陋的界面吧。


        界面顶部是一些色块,只支持 Qt.CopyAction ,鼠标可以拖动,把它们拖到下面的浅蓝色区域内。下图是拖放后的效果:


        一旦色块被拖放到浅蓝色区域,我会动态创建一个支持 Qt.MoveAction 的矩形,复制拖放的矩形的大小、颜色等参数。这样蓝色区域内新创建的这些 Rectangle 就可以被移动。

    代码来了

    import QtQuick 2.3
    import QtQuick.Window 2.2
    
    Window {
        id: root;
        visible: true;
        width: 480;
        height: 400;
    
        //drag source item should not use anchors to layout! or drag will failed
        Component {
            id: dragColor;
            Rectangle {
                id: dragItem;
                x: 0;
                y: 0;
                width: 60;
                height: 60;
                Drag.active: dragArea.drag.active;
                Drag.supportedActions: Qt.CopyAction;
                Drag.dragType: Drag.Automatic;
                Drag.mimeData: {"color": color, "width": width, "height": height};
    
                MouseArea {
                    id: dragArea;
                    anchors.fill: parent;
                    drag.target: parent;
    
                    onReleased: {
                        if(parent.Drag.supportedActions == Qt.CopyAction){
                            dragItem.x = 0;
                            dragItem.y = 0;
                        }
                    }
                }
            }
        }
    
        Row {
            id: dragSource;
            anchors.top: parent.top;
            anchors.left: parent.left;
            anchors.margins: 4;
            anchors.right: parent.right;
            height: 64;
            spacing: 4;
            z:-1;
            Loader {
                width: 60;
                height: 60;
                z: 2;
                sourceComponent: dragColor;
                onLoaded: item.color = "red";
            }
            Loader {
                width: 60;
                height: 60;
                z: 2;
                sourceComponent: dragColor;
                onLoaded: item.color = "black";
            }
            Loader {
                width: 60;
                height: 60;
                z: 2;
                sourceComponent: dragColor;
                onLoaded: item.color = "blue";
            }
            Loader {
                width: 60;
                height: 60;
                z: 2;
                sourceComponent: dragColor;
                onLoaded: item.color = "green";
            }
        }
    
        DropArea {
            id: dropContainer;
            anchors.top: dragSource.bottom;
            anchors.left: parent.left;
            anchors.right: parent.right;
            anchors.bottom: parent.bottom;
            z: -1;
    
            onEntered: {
                drag.accepted = true;
                followArea.color = drag.getDataAsString("color");
                console.log("onEntered, formats - ", drag.formats, " action - ", drag.action);
            }
    
            onPositionChanged: {
                drag.accepted = true;
                followArea.x = drag.x - 4;
                followArea.y = drag.y - 4;
            }
    
            onDropped: {
                console.log("onDropped - ", drop.proposedAction);
                console.log("data - ", drop.getDataAsString("color"));
                console.log("event.x - ", drop.x, " y- ", drop.y);
                console.log("event class = ", drop);
                if(drop.supportedActions == Qt.CopyAction){
                    var obj = dragColor.createObject(destArea,{
                                                         "x": drop.x,
                                                         "y": drop.y,
                                                         "width": parseInt(drop.getDataAsString("width")),
                                                         "height": parseInt(drop.getDataAsString("height")),
                                                         "color": drop.getDataAsString("color"),
                                                         "Drag.supportedActions": Qt.MoveAction,
                                                         "Drag.dragType": Drag.Internal
    
                                                     });
                }else if(drop.supportedActions == Qt.MoveAction){
                    console.log("move action, drop.source - ", drop.source, " drop.source.source - ", drop.source.source);
                }
                drop.acceptProposedAction();
                drop.accepted = true;
            }
    
            Rectangle {
                id: followArea;
                z: 2;
    
                width: 68;
                height: 68;
                border.width: 2;
                border.color: "yellow";
                visible: parent.containsDrag;
            }
    
            Rectangle {
                id: destArea;
                anchors.fill: parent;
                color: "lightsteelblue";
                border.width: 2;
                border.color: parent.containsDrag ? "blue" : "gray";
            }
        }
    }

        代码不多,自己看看就好。

        关于 MIME ,我没搞清楚在 QML 中怎么构建类型和数据……

        关于 mimeData ,它实际上是一个 QVariantMap ,经过我不断地试错,发现可以用对象的字面量表示法来为其赋值,就像这样:

    Drag.mimeData: {"color": color, "width": width, "height": height};

        而我们在 DropArea 对象的 onDropped 信号处理器内通过 DragEvent 的 getDataAsString 来获取被拖动元素传递过来的数据,就像这样:

    parseInt(drop.getDataAsString("width")

        实际上类似 key - value 对。


        好了,就这么着了,到这里吧。


    回顾一下我的Qt Quick系列文章:


    展开全文
  • vue-dragscroll快速使用

    2019-06-02 03:29:06
    $ npm install vue-dragscroll vscode 打开终端,键入npm install vue-dragscroll 回车,下载完成即可 import VueDragscroll from 'vue-dragscroll' Vue.use(VueDragscroll) 上面代码放入你的vue项目的main.js中 &...

    Via npm

    $ npm install vue-dragscroll
    

    vscode 打开终端,键入npm install vue-dragscroll 回车,下载完成即可

    import VueDragscroll from 'vue-dragscroll'
    Vue.use(VueDragscroll)
    

    上面代码放入你的vue项目的main.js中

    <div v-dragscroll>..</div>
    

    然后,在你需要放置触摸滑动的内容,标签里加入指令v-dragscroll

    ====================================================================

    Via cdn

    <script src="path/to/vue-dragscroll.min.js"></script>
    <!-- OR -->
    <script src="https://unpkg.com/vue-dragscroll"></script>
    

    不好使,不推荐

    直接下载使用,
    Download the and unpack distribution
    https://github.com/donmbelembe/vue-dragscroll/releases/tag/1.8.3

    下载好,解压。
    改名为vue-dragscroll
    解压后的文件夹改名为vue-dragscroll

    在这里插入图片描述

    直接把vue-dragscroll拖入你的node_modules文件夹里边
    (这个效果和直接在终端用npm下载的结果是一样的,不喜欢操作cmd、npm之类的新朋友可以这样做)
    

    接下来,加指令 v-dragscroll

    <div v-dragscroll>..</div>
    

    哪里需要加那里!

    展开全文
  • 在这篇文章中,我们将展示如何在QML应用中实现drag and drop的功能。更多的阅读可以参照Qt SDK。

    在这篇文章中,我们将展示如何在QML应用中实现drag and drop的功能。更多的阅读可以参照Qt SDK。


    在这里,我们首先设计一个DropTile.qml


    DropTile.qml


    import QtQuick 2.0
    
    DropArea {
        id: dragTarget
    
        property string colorKey
        property alias dropProxy: dragTarget
    
        width: mainpage.width/4 - units.gu(1)
        height: width
        keys: [ colorKey ]
    
        onDropped: {
            console.log("onDropped!")
        }
    
        onEntered: {
            console.log("onEntered!");
        }
    
        onExited: {
            console.log("onExited!")
        }
    
        onPositionChanged: {
            console.log("onPositionChanged!");
        }
    
        Rectangle {       
            id: dropRectangle
    
            anchors.fill: parent
            color: colorKey
    
            states: [
                State {
                    when: dragTarget.containsDrag
                    PropertyChanges {
                        target: dropRectangle
                        color: "grey"
                    }
                }
            ]
        }
    }
    

    代码的设计非常简单。处理显示一些events之外,只显示了一个Rectange。当有Drag存在时,显示的grey的颜色。否则为“colorKey”显示的颜色。

    另外,我们设计一个DragTile.qml.

    DragTile.qml


    import QtQuick 2.0
    
    Item {
        id: root
        property string colorKey
    
        width: mainpage.width/4 - units.gu(1); height: width
    
        MouseArea {
            id: mouseArea
    
            width: parent.width
            height: width
    
            anchors.centerIn: parent
    
            drag.target: tile
    
            onReleased: parent = tile.Drag.target !== null ? tile.Drag.target : root
    
            Rectangle {
                id: tile
    
                width: root.width; height: width
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
    
                color: colorKey
    
                Drag.keys: [ colorKey ]
                Drag.active: mouseArea.drag.active
                Drag.hotSpot.x: 32
                Drag.hotSpot.y: 32
    
                Image {
                    anchors.fill: parent
                    source: image
                }
    
                states: State {
                    when: mouseArea.drag.active
                    ParentChange { target: tile; parent: root }
                    AnchorChanges { target: tile; anchors.verticalCenter: undefined; anchors.horizontalCenter: undefined }
                }
    
            }
        }
    }
    

    在这个设计中,我们显示了一个图片。这个图片是在model中定义的。在mouseArea有drag实际时,我们有意地改变tile的父亲为root而不是先前的mouseArea。当鼠标在release时,如果有一个DropArea的话,它的地方将被自动放置root所展示的内容,在我们的示例中,也就是一个图片。


    Main.qml


    import QtQuick 2.4
    import Ubuntu.Components 1.1
    
    /*!
        \brief MainView with a Label and Button elements.
    */
    
    MainView {
        // objectName for functional testing purposes (autopilot-qt5)
        objectName: "mainView"
    
        // Note! applicationName needs to match the "name" field of the click manifest
        applicationName: "draganddrop.liu-xiao-guo"
    
        /*
         This property enables the application to change orientation
         when the device is rotated. The default is false.
        */
        //automaticOrientation: true
    
        // Removes the old toolbar and enables new features of the new header.
    //    useDeprecatedToolbar: false
    
        width: units.gu(60)
        height: units.gu(85)
    
        Page {
            id: mainpage
            title: i18n.tr("draganddrop")
    
            ListModel {
                id: mymodel
                ListElement {
                    image: "images/pic1.jpg"
                }
                ListElement {
                    image: "images/pic2.jpg"
                }
                ListElement {
                    image: "images/pic3.jpg"
                }
                ListElement {
                    image: "images/pic4.jpg"
                }
            }
    
    
            Column {
                id: layout
                anchors.centerIn: parent
                spacing: units.gu(5)
    
                Row {
                    id: bottom
                    width: bottom.childrenRect.width
                    height: mainpage.height/3
                    anchors.horizontalCenter: parent.horizontalCenter
                    spacing: units.gu(1)
    
                    Repeater {
                        model: mymodel.count;
                        delegate: DropTile { colorKey: "red" }
                    }
                }
    
                Row {
                    id: top
                    width: top.childrenRect.width
                    height: mainpage.height/3
                    anchors.horizontalCenter: parent.horizontalCenter
                    spacing: units.gu(1)
    
                    Repeater {
                        model: mymodel
                        delegate: DragTile { colorKey: "red" }
                    }
                }
    
            }
        }
    }
    


    在我们的Main.qml中,我们定义了一个model来装我们的数据,同时。我们创建了DragTile及DropTile。

    运行我们的应用:

        




    展开全文
  • Touch Drag Inside:手指在控件窗口内拖动 Touch Drag Outside:手指在控件窗口外拖动 Touch Drag Enter:手指从控件窗口外部拖动到内部 Touch Drag Exit:手指从控件窗口内部拖动到外部 [依据] 来自Apple官方...

    Touch Drag Inside:手指在控件窗口内拖动

    Touch Drag Outside:手指在控件窗口外拖动

    Touch Drag Enter:手指从控件窗口外部拖动到内部

    Touch Drag Exit:手指从控件窗口内部拖动到外部


    [依据] 来自Apple官方文档 UIControlEvents

    UIControlEventTouchDragInside:An event where a finger is dragged inside the bounds of the control.

    UIControlEventTouchDragOutside:An event where a finger is dragged just outside the bounds of the control.

    UIControlEventTouchDragEnter:An event where a finger is dragged into the bounds of the control.

    UIControlEventTouchDragExit:An event where a finger is dragged from within a control to outside its bounds.

    展开全文
  • 拖拽(Drag/Drop)是个非常普遍的功能。在生活中,拖放物品其实是相当常见的一个动作。你可以抓住一个对象,并且拖动到你想放置的区域。 在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。 定义 拖放是一...
  • 拖放(Drag 和 drop)是 HTML5 标准的组成部分。 浏览器支持 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。...被拖元素,dragElement :  1、添加事件:ondragstart 2、添加属性:d
  • drag api是h5中的新功能,用来拖拽页面元素挺有用的,先小结一下 首先,基本概念 声明,概念部分我是借鉴这篇文章 https://www.cnblogs.com/wuya16/p/DragApi.html 想让一个元素能拖动,需要在html中添加属性 ...
  • d3.drag使用指南

    2019-09-16 14:02:37
    创建一个可拖动的圆展示d3.drag的使用 首先创建svg容器和一个circle元素: const width = window.innerWidth const height = window.innerHeight const svg = d3.select('body') .append('svg') .attr('width', ...
  • Angualr drag-drop里面的功能能让我们非常方便的处理页面上视图的拖拽(自由拖拽、列表排序拖拽、列表之间拖拽)问题。推荐大伙儿直接看官网,因为下面的内容绝大部分内容包括例子都来源于官网 ...
  • /guide/drag_and_drop 翻译:frank/sp42 转载请保留本页信息 拖放 Drag and Drop 在那么多的交互设计模式之中,“拖放(Drag andDrop)”模式可以说是开发者感觉比较不错的。用户日常在进行拖放操作的时候,真的...
  • 滑动验证:https://github.com/AshleyLv/vue-drag-verify   ...npm install vue-drag-verify --save html &lt;drag-verify :width="width" :height="height" ...
  • 鼠标事件之drag_and_drop()方法使用,drag_and_drop()方法涉及到参数传递,一个是要拖拽元素的起点,一个是要拖拽元素的终点;同时本段代码中涉及到了对web界面弹框的处理,webdriver中提供的switch_to_alert()方法...
  • js中的拖拽drag

    2017-08-26 18:22:53
    /** * 拖放事件 * (默认图像,链接,文本是可以拖动的) * (别的元素要拖动首先设置draggable="true":对于draggable的支持ie10+,ie9-只能使用默认拖动) ... * b.drag:在拖放过程中持续触犯 * c.dragend:停止
  • 博主写得很详细,最近正在为这个头疼,看了这个终于搞清楚了原文地址:and Drop详解与代码示例">Java中的Drag and Drop详解与代码示例作者:SuRen对对Java中的Drag and Drop做了一个总结, 觉得大致可以通过两种...
  • d3中元素拖拽drag实例

    2016-07-25 14:31:40
    https://github.com/d3/d3-3.x-api-reference/blob/master/Drag-Behavior.md使用拖拽功能我们可以快速将图标展示成我们需要的样子。d3.behavior.drag()用来构造一个拖拽行为。如果让元素响应这个行为需要使用c
  • Web开发中的Drag&Drop完全手册 转自:http://www.cnblogs.com/birdshome/archive/2006/07/22/Drag_Drop.html这几天做了一些drag&drop操作方面的...这里要讨论的drag&drop是指使用IE提供的内置机制,而不是使用鼠标模
  • 说明:ngDraggable可以实现元素的拖动,只需要在元素上加入指令ng-drag="true" ng-drag-data="xxx",既可以将数据xxx连同元素一起拖动到其他元素节点上,可以接收元素的节点需要加入指令ng-drop...
  • angular-drag 基于 AngularJS 的拖拽指令 支持 GPU 加速支持边界限制支持设置拖拽把柄移动端与 PC 端通用 使用 支持使用 script 标签或者 webpack、requirejs、seajs 调用: scrip
1 2 3 4 5 ... 20
收藏数 64,086
精华内容 25,634
关键字:

drag quickcocos