简单的拖拽

关键字: flex, 拖拽, 简单拖拽

从一个list拖拽到另一个list中

 

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
	<mx:Script>
  		<![CDATA[
    		private function initApp():void{
      			words.dataProvider=['Water','水','Car','汽车','House','房屋','Book','书籍','Music','音乐','Sandwich','三明治'];
      			english.dataProvider=[];
      			chinese.dataProvider=[];
		    }
		 ]]>
</mx:Script>

<mx:Panel x="0" y="0" width="450" height="350" layout="absolute" title="Sort Words By Language">
    <mx:Label x="7" y="3" text="Drag to Correct Language"/>
    <mx:List x="7" y="25" id="words" width="200" height="275" allowMultipleSelection="true" dragEnabled="true" dragMoveEnabled="true"></mx:List>
    <mx:Label x="223" y="6" text="English"/>
    <mx:List x="223" y="25" id="english" width="200" height="120" dropEnabled="true"></mx:List>
    <mx:Label x="223" y="150" text="中文"/>
    <mx:List x="223" y="177" id="chinese" width="200" height="120" dropEnabled="true"></mx:List>
 </mx:Panel>
</mx:WindowedApplication>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用react-dnd库来实现可拖动看板工具。react-dnd是一个用于实现拖放交互的React库,它提供了一组React组件和hooks,使开发者能够轻松地创建可拖动和可放置的组件。 首先,你需要安装react-dnd和react-dnd-html5-backend依赖: ``` npm install --save react-dnd react-dnd-html5-backend ``` 然后,你可以创建一个Board组件,它包含多个List组件,每个List组件包含多个Card组件。在这个组件中,你需要使用DragDropContext组件来启用拖放功能,并使用DropTarget和DragSource组件来定义可拖动和可放置的组件: ```javascript import { DragDropContext, DropTarget, DragSource } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; const Board = ({ lists }) => { return ( <DragDropContext backend={HTML5Backend}> {lists.map((list) => ( <List key={list.id} list={list} /> ))} </DragDropContext> ); }; const List = ({ list, connectDropTarget }) => { return ( <div ref={connectDropTarget}> <h2>{list.title}</h2> {list.cards.map((card) => ( <Card key={card.id} card={card} /> ))} </div> ); }; const Card = ({ card, connectDragSource }) => { return connectDragSource( <div> <h3>{card.title}</h3> <p>{card.description}</p> </div> ); }; const cardSource = { beginDrag(props) { return { id: props.card.id }; }, }; const cardTarget = { drop(props, monitor) { // Handle drop event here }, }; const DraggableCard = DragSource('card', cardSource, (connect, monitor) => ({ connectDragSource: connect.dragSource(), isDragging: monitor.isDragging(), }))(Card); const DroppableList = DropTarget('card', cardTarget, (connect, monitor) => ({ connectDropTarget: connect.dropTarget(), isOver: monitor.isOver(), }))(List); ``` 在上面的代码中,我们定义了三个组件:Board、List和Card。我们使用DragDropContext组件来包裹Board组件,以启用拖放功能。在List和Card组件中,我们使用DropTarget和DragSource组件来定义可放置和可拖动的组件。我们还定义了一个DraggableCard和DroppableList组件,它们是使用DragSource和DropTarget高阶组件包装后的Card和List组件。 最后,你可以在App组件中渲染Board组件,并传递一个包含所有列表和卡片的数组作为props: ```javascript const App = () => { const lists = [ { id: 1, title: 'Todo', cards: [ { id: 1, title: 'Task 1', description: 'Description 1' }, { id: 2, title: 'Task 2', description: 'Description 2' }, ], }, { id: 2, title: 'Doing', cards: [{ id: 3, title: 'Task 3', description: 'Description 3' }], }, { id: 3, title: 'Done', cards: [{ id: 4, title: 'Task 4', description: 'Description 4' }], }, ]; return <Board lists={lists} />; }; ``` 这样,你就可以创建一个简易的可拖动看板工具了。你还可以使用react-dnd提供的其他功能,如排序、多拖拽等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值