multi Drag & Drop

**vahidma** · 25 Sep 2012, 12:50 AM

Hi everyone,

I've developed an HTML UI form and made all the components such as text-area or inputs and ... draggable.
I'm wondering how can I add the capability of multi-drag and drop to several components. This is part of my code.

based on the click of a button I'm adding drag-drop capability to a component
dragTargets[dragIndex] = new Ext.dd.DDProxy(elem, 'src', {
isTarget : false
});
.
.
.
dropTargets[dropIndex] = new Ext.dd.DDTarget(id, 'src');

Could you plz help me

Cheers

**mitchellsimoens** · 27 Sep 2012, 8:03 AM

I'm not understanding what you are wanting?

**vahidma** · 28 Sep 2012, 10:26 PM

Hi

Thanks for replying. I try to be more clear. What I want to do is to have the capability of selecting multiple HTML tags and moving them around the page. We are modifying an HTML form designer. For designing a form the user must go through 2 phases. First phase, adding all the required HTML tags such as textField or textArea or etc to the form (this is a legacy project and we cannot build the project from scratch using Extjs). Second phase, finished adding all needed items to the form user can design the form by moving added tags around the page. So far, I was able to achieve this by having a javascript method which gives the selected HTML tag the DD capability. First it gives the drag capability to the selected HTML tag and then defines all the valid drop target for that. The method is as below

Code:

function move(selectedComponentId){

    var elem = Ext.get(selectedComponentId);
    dragTargets[dragIndex] = new Ext.dd.DDProxy(elem, 'src', {
        isTarget : false
    });

      var dropTargets = new Array();    
      var allElements = Ext.query("*[class*=elementClass]")
       Ext.Array.each(allElements, function(element) {
           var el = Ext.get(element);
           var id = el.id;
           if (id.indexOf('_Container') >= 0||id.indexOf('desktop') >= 0 ){
                id = el.select('div').elements[0].id;
                if (elem.id+'_destDiv_body' != id){
                    dropTargets[dropIndex] = new Ext.dd.DDTarget(id, 'src');
                    dropIndex++;
                }
            }
        });


}

Right now I can only move a single tag. I want to select multiple tags by CRTL and moving all of them simultaneously. I know I can give DD to multiple HTML tags but how can I do it by holding CTRL (selecting) and then moving all of them at the same time?

**vahidma** · 6 Oct 2012, 10:09 PM

Hi,
It seems that it is still not clear for you. Simply I want to be able to move "div1" and "div2" simultaneously within the boundaries of "mainDiv". How can I achieve this?

Code:

<html>
	<body>
		<div id="mainDiv" style="width:100%;height:100%;border:1px solid"">
			<div id="div1" style="width:100;height:100px;border:1px solid">div1</div>
			<div id="div2" style="width:100;height:100px;border:1px solid">div2</div>
		</div>
	</body>	
</html>

Thanks

Thread: multi Drag & Drop

Thread Tools

Search Thread

Display

Unanswered: multi Drag & Drop

multi Drag & Drop

Tags for this Thread

Posting Permissions