1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    vahidma is on a distinguished road

      0  

    Default Unanswered: multi Drag & Drop

    Unanswered: multi Drag & Drop


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm not understanding what you are wanting?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    vahidma is on a distinguished road

      0  

    Default multi Drag & Drop

    multi Drag & Drop


    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?

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    3
    Vote Rating
    0
    vahidma is on a distinguished road

      0  

    Default


    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 Participants: 1

Tags for this Thread