Flutter提供了强大的拖拽控件，可以灵活定制，并且非常简单。这节课就学习一下Flutter拖拽控件，并根据学到的知识作一个拖拽案例>

Draggable控件实例 - 图1

Draggable Widget

Draggable控件负责就是拖拽，父层使用了Draggable，它的子元素就是可以拖动的，子元素可以实容器，可以是图片。用起来非常的灵活。
参数说明：

  • data: 是要传递的参数，在DragTarget里，会接受到这个参数。当然要在拖拽控件推拽到DragTarget的时候。
  • child:在这里放置你要推拽的元素，可以是容器，也可以是图片和文字。
  • feedback: 常用于反馈(设置)推拽元素时的样子，在案例中当推拽的时候，我们把它的颜色透明度变成了50%。当然你还可以改变它的大小。
  • onDraggableCanceled:是当松开时的相应事件，经常用来改变推拽时到达的位置，改变时用setState来进行。

代码:

  1. Draggable(
  2.   data:widget.widgetColor,
  3.   child: Container(
  4.     width: 100,
  5.     height: 100,
  6.     color:widget.widgetColor,
  7.   ),
  8.   feedback:Container(
  9.     width: 100.0,
  10.     height: 100.0,
  11.     color: widget.widgetColor.withOpacity(0.5),
  12.   ),
  13.   onDraggableCanceled: (Velocity velocity, Offset offset){
  14.     setState(() {
  15.       this.offset = offset;
  16.     });
  17.   },

DragTarget Widget

DragTarget是用来接收拖拽事件的控件，当把Draggable放到DragTarget里时，他会接收Draggable传递过来的值，然后用生成器改变组件状态。

  • onAccept:当推拽到控件里时触发，经常在这里得到传递过来的值。
  • builder: 构造器，里边进行修改child值。
    1. DragTarget(onAccept: (Color color) {
    2. _draggableColor = color;
    3. }, builder: (context, candidateData, rejectedData) {
    4. return Container(
    5.   width: 200.0,
    6.   height: 200.0,
    7.   color: _draggableColor,
    8. );
    9. }),

    实例代码DEMO

    主文件main.dart

    1. import 'package:flutter/material.dart';
    2. import 'drag_drop.dart';
    3. void main() => runApp(new MyApp());
    4. class MyApp extends StatelessWidget {
    5. @override
    6. Widget build(BuildContext context) {
    7.   return MaterialApp(
    8.     debugShowCheckedModeBanner: false,
    9.     title:'Flutter Demo',
    10.     theme:ThemeData(
    11.       primarySwatch: Colors.blue
    12.     ),
    13.     home:DraggableDemo()
    14.   );
    15. }
    16. }

drag_drop.dart 文件

  1. import 'package:flutter/material.dart';
  2. import 'draggable_widget.dart';
  4. class DraggableDemo extends StatefulWidget {
  5.   @override
  6.   _DraggableDemoState createState() => _DraggableDemoState();
  7. }
  9. class _DraggableDemoState extends State<DraggableDemo> {
  10.   Color _draggableColor = Colors.pink[50];
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return Scaffold(
  14.         body: Stack(
  15.       children: <Widget>[
  16.         DraggableWidget(
  17.           offset: Offset(80.0, 80.0),
  18.           widgetColor: Colors.tealAccent,
  19.         ),
  20.         DraggableWidget(
  21.           offset: Offset(180.0, 80.0),
  22.           widgetColor: Colors.redAccent,
  23.         ),
  24.         DraggableWidget(
  25.           offset: Offset(280.0, 80.0),
  26.           widgetColor: Colors.red[100],
  27.         ),
  28.         Center(
  29.           child: DragTarget(onAccept: (Color color) {
  30.             _draggableColor = color;
  31.           }, builder: (context, candidateData, rejectedData) {
  32.             return Container(
  33.               width: 200.0,
  34.               height: 200.0,
  35.               color: _draggableColor,
  36.             );
  37.           }),
  38.         )
  39.       ],
  40.     ));
  41.   }
  42. }

draggable_widget.dart 文件

  1. import 'package:flutter/material.dart';
  3. class DraggableWidget extends StatefulWidget {
  4.   final Offset offset;
  5.   final Color widgetColor;
  6.   const DraggableWidget({Key key, this.offset, this.widgetColor})
  7.       : super(key: key);
  8.   _DraggableWidgetState createState() => _DraggableWidgetState();
  9. }
  11. class _DraggableWidgetState extends State<DraggableWidget> {
  12.   Offset offset = Offset(0.0, 0.0);
  14.   @override
  15.   void initState() {
  16.     super.initState();
  17.     offset = widget.offset;
  18.   }
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     return Positioned(
  23.       left: this.offset.dx,
  24.       top: this.offset.dy,
  25.       child: Draggable(
  26.         data: widget.widgetColor,
  27.         child: Container(
  28.           width: 100,
  29.           height: 100,
  30.           color: widget.widgetColor,
  31.         ),
  32.         feedback: Container(
  33.           width: 100.0,
  34.           height: 100.0,
  35.           color: widget.widgetColor.withOpacity(0.5),
  36.         ),
  37.         onDraggableCanceled: (Velocity velocity, Offset offset) {
  38.           setState(() {
  39.             //这里可以做拖拽到拖拽区块时候的判断
  40.             if (true) {
  41.               this.offset = offset;
  42.             }
  43.           });
  44.         },
  45.       ),
  46.     );
  47.   }
  48. }

JavaScript中的拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.         <title>Document</title>
  9.         <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  10.     </head>
  11.     <style>
  12.         div {
  13.             width: 100px;
  14.             height: 100px;
  15.             border: 1px solid red;
  16.             float: left;
  17.             border-left: 0;
  18.             border-top: 0
  19.         }
  21.         img {
  22.             width: inherit;
  23.             height: inherit;
  24.         }
  25.     </style>
  27.     <body>
  28.         <div id="div1" class="q" ondragover="allowDrop(event)" ondrop="drop(event)"><img id="drag1"
  29.                 src="http://n.sinaimg.cn/sinakd10112/175/w1080h1495/20200326/f2ac-irkazzv3170145.jpg" draggable="true"
  30.                 ondragstart="drag(event)" width="200" height="200" /></div>
  31.         <div id="div2" ondragover="allowDrop(event)" ondrop="drop(event)"><img id="drag2"
  32.                 src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1585323091847&di=552aae10f464e9ca90e91920c450060e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171120%2F5bbe5a3c8b26408095e60d8f8af0d239.jpeg"
  33.                 draggable="true" ondragstart="drag(event)" width="200" height="200" /></div>
  34.     </body>
  36. </html>
  39. <script>
  40.     for (let i = 0; i < 10; i++) {
  41.         // $("body").append("<div ondragover='allowDrop(event)' ondrop='drop(event)'></div>")
  42.         var eDiv = document.createElement("div")
  43.         eDiv.setAttribute('ondragover', 'allowDrop(event)')
  44.         eDiv.setAttribute('ondrop', 'drop(event)')
  45.         document.querySelector("body").append(eDiv)
  46.         console.log(eDiv.attributes);
  47.     }
  49.     /*
  50.         拖事件  图片
  51.         1 设置图片允许拖动 
  52.          draggable="true"
  53.         2 拖的时候保存数据（图片id）
  54.         ev.dataTrasfer.setData('credential凭据',ev.target.id);
  56.         放置事件  DIV
  57.         1允许图片放置这里
  58.         ondragover="allowDrop()"
  59.         allowDrop里面是一个阻止浏览器默认操作
  60.         function allowDrop(ev){
  61.             ev.preventDefault();
  62.         }
  64.         2 放置图片时
  65.         ondrop="drop(ev)"
  66.         function drop(ev{
  67.             ev.preventDefalut(); //阻止浏览器默认操作
  68.             var data=ev.dataTransfer.getData('credential凭据');//获取前面保存的数据
  69.             ev.target.appendChild(document.getElementById(data));//    DIV追加子元素
  70.         }
  71.     */
  72.     var img, div;
  73.     function drag(ev) {
  74.         ev.dataTransfer.setData("credential凭据", ev.target.id);
  75.         img = ev.target;
  76.     }
  78.     function allowDrop(ev) { ev.preventDefault(); }
  81.     function drop(ev) {
  82.         if (ev.target.nodeName == "DIV") {
  83.             ev.preventDefault();
  84.             iSrc = ev.target.src;
  85.             var data = ev.dataTransfer.getData("credential凭据");
  86.             ev.target.appendChild(document.getElementById(data));
  87.         }
  88.         else if (ev.target.nodeName == "IMG") {
  89.             iSrc = img.src;
  90.             img.src = ev.target.src;
  91.             ev.target.src = iSrc;
  92.         }
  94.         // console.log(ev.tatrget);
  95.     }
  97. </script>

附件

Draggable拖拽控件实例-lib.zip