在list内部进行拖拽

可以在列表中拖拽,复制所拖拽的目标

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="creationHandler()">
<mx:Script>
	<![CDATA[
		import mx.utils.ObjectUtil;
		import mx.events.DragEvent;
		import mx.collections.ArrayCollection;
		
		
		private function creationHandler():void
		{
			var collection:ArrayCollection = new ArrayCollection(['A','B','C']);
			contactList.dataProvider = collection;
			
		}
		
		private function dropHandler(evt:DragEvent):void
		{
			var listItem:Object = evt.dragSource.dataForFormat('items');
			var index:int = contactList.calculateDropIndex(evt);
			ArrayCollection(contactList.dataProvider).setItemAt(ObjectUtil.copy(listItem),index);
			
		}
			
	]]>
</mx:Script>

	<mx:Panel x="164" y="70" width="430" height="319" layout="absolute">
	<mx:List id="contactList" width="100%" height="100%" dragEnabled="true" dropEnabled="true"
		 dragMoveEnabled="false" dragComplete="dropHandler(event)"/>
	</mx:Panel>
	
</mx:Application>



例子中讲list内联dragEnabled、 dropEnabled的属性设为true,用它们来响应dragManger事件,dragMoveEnabled是用来指示列表中被拖拽的目标是移动到还是复制到列表的标记。默认状态为false,支持将拖拽数据复制添加到列表当中(此处为复制),从而list中接受新的项目,调用ObjectUtil.copy为其制定新的标识符;设为true,则事件放置完成时,列表拖拽的项目会从原来的索引中移动到鼠标指向的目标索引。

 


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用HTML5中的draggable属性和JavaScript中的drag事件来实现内部的div可拖动。 首先,在内部的div中添加draggable属性,将其设置为true,表示可拖动。 ```html <div class="outer"> <div class="inner" draggable="true"></div> </div> ``` 然后,在JavaScript中,为内部的div添加dragstart、drag、dragend事件,分别表示拖动开始、拖动中和拖动结束。 ```javascript var inner = document.querySelector('.inner'); inner.addEventListener('dragstart', function(event) { // 拖动开始时 // 设置拖动的数据和效果 event.dataTransfer.setData('text/plain', '拖动的文本'); event.dataTransfer.effectAllowed = 'move'; }); inner.addEventListener('drag', function(event) { // 拖动中 // 可以在这里实现拖动的效果 }); inner.addEventListener('dragend', function(event) { // 拖动结束 // 可以在这里处理拖动结束后的逻辑 }); ``` 此外,还可以在外部的div中添加dragover、dragenter、dragleave和drop事件,来实现拖放的效果。 ```javascript var outer = document.querySelector('.outer'); outer.addEventListener('dragover', function(event) { // 阻止默认的拖放行为 event.preventDefault(); // 设置允许的拖放效果 event.dataTransfer.dropEffect = 'move'; }); outer.addEventListener('dragenter', function(event) { // 在拖动进入时添加样式 outer.classList.add('dragover'); }); outer.addEventListener('dragleave', function(event) { // 在拖动离开时移除样式 outer.classList.remove('dragover'); }); outer.addEventListener('drop', function(event) { // 阻止默认的拖放行为 event.preventDefault(); // 获取拖动的数据 var data = event.dataTransfer.getData('text/plain'); // 在drop事件中处理拖放的逻辑 }); ``` 通过以上的代码,就可以实现内部的div可拖动的效果了。当然,还可以根据具体的需求进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值