Print Page - Drag&Drop with iframes

Title: Drag&Drop with iframes
Post by: mpage on October 29, 2013, 09:42:00 AM

Hello,
I have an easyUI made of:
- a left region containing a tree
- a center panel containing tabs. Each tab content is put inside an iframe (with same domain).
I do not succeed to drag tree nodes and drop them onto the iframe in the center region. It works if the tab panel does not contain an iframe.

Below is the structure of my code :

Code:

<body class="easyui-layout">
   <div data-options="region:'west',split:true" style="width:250px;padding:10px;">
      <ul id="tt" class="easyui-tree" data-options="data: someJson, animate: true, onLoadSuccess: prepareDrag"></ul>
   </div>
   <div class="easyui-droppable" data-options="region:'center', accept: '.tree-title',  onDrop: handleDrop">
      <div id="tabs" class="easyui-tabs" style=""> </div>
   </div>
   
<script>
      function prepareDrag(node, data) {
         $('.tree-title').draggable({
            disabled: false,
            revert: true,
            proxy: myProxy,
            ...
         });
      }
      function handleDrop(e, source){
         console.log(' dropped');
      }
   <script>
</body>

What's going wrong ?
Thanks for your help.
Michel

Title: Re: Drag&Drop with iframes
Post by: stworthy on October 29, 2013, 06:21:42 PM

The simplest way to solve this issue is to prevent cursor from accessing iframe while a dragging event is in progress.

Code:

function prepareDrag(node, data) {
	$('.tree-title').draggable({
		disabled: false,
		revert: true,
		proxy: myProxy,
		onBeforeDrag:function(){
			var p = $('body').layout('panel','center');
			this.mask = $('<div></div>').appendTo('body');
			this.mask.css({
				position:'absolute',
				zIndex:99999999,
				background:'#fff',
				opacity: 0.10,
				left: p.offset().left,
				top: p.offset().top,
				width: p.outerWidth(),
				height: p.outerHeight()
			});
		},
		onStopDrag:function(){
			this.mask.remove();
		}
	});
}

Title: Re: Drag&Drop with iframes
Post by: mpage on October 30, 2013, 01:48:40 PM

Thanks for your reply.
Ok, I guess I was not clear: my goal is precisely to drop a tree node onto an iframe.
I found a solution that avoids using an iframe: instead I load the tab content with an Ajax call and the problem is solved.
Michel

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mpage on October 29, 2013, 09:42:00 AM