视觉拖拽编程怎么弄

视觉拖拽编程通常指的是通过图形化界面来创建程序的方法，用户可以通过拖动和放置预定义的代码模块或图形组件来设计程序逻辑。以下是一个简单的视觉拖拽编程示例，使用JavaScript和WXML实现一个视图的拖拽功能：

HTML结构

```html

wx:for="{{ViewArr}}"

wx:key="index"

catchtouchmove="move"

catchtouchstart="start"

catchtouchend="end"

data-index="{{item.index}}"

>

```

JavaScript代码

```javascript

Page（{

data: {

ViewArr: [

['red', '0rpx'],

['blue', '110rpx'],

['pink', '220rpx'],

['mediumslateblue', '330rpx'],

['lavender', '440rpx'],

],

},

start: function （e） {

const that = this；

const index = ~~e.currentTarget.dataset.index；

const move_view = `ViewArr[${index}]`；

const top = e.touches.clientY + 'px'；

that.setData（{ [move_view]: top }）；

},

move: function （e） {

const that = this；

const index = ~~e.currentTarget.dataset.index；

const move_view = `ViewArr[${index}]`；

const top = e.touches.clientY + 'px'；

that.setData（{ [move_view]: top }）；

},

end: function （e） {

// 可以在这里添加结束拖拽后的逻辑

},

}）；

```

解释

HTML结构

使用``元素创建多个可拖拽的视图，每个视图都有一个`data-index`属性用于标识其位置。

每个视图的`style`属性中包含`top`值，初始值为0。

JavaScript代码

`data`对象中定义了一个`ViewArr`数组，包含颜色和初始`top`位置。

`start`方法在视图被按下时触发，记录当前视图的索引和顶部位置。

`move`方法在视图被拖动时触发，更新视图的顶部位置。

`end`方法在视图被释放时触发，可以在这里添加结束拖拽后的逻辑。

建议

这种方法适用于简单的拖拽需求，如果需要更复杂的拖拽和放置功能，可以考虑使用成熟的图形化编程工具或框架，如Scratch、App Inventor等。

对于复杂的应用程序，可能需要结合JavaScript和CSS来实现更高级的拖拽效果和交互。