EasyUI Forum
April 29, 2024, 03:57:04 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > Drag&Drop with iframes
Pages: [1]
« previous next »
  Print  
Author Topic: Drag&Drop with iframes  (Read 8809 times)
mpage
Newbie
*
Posts: 5


View Profile Email
« 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
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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();
		}
	});
}
Logged
mpage
Newbie
*
Posts: 5


View Profile Email
« Reply #2 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
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!