Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post

    Drag and Drop script ?

    looking for a DRAG AND DROP script

    some of the requirements of the script are:
    1. simple drag and drop on elements;
    2. onload (moving to new pages and then returning), new positions of the dragged and dropped elements are retained;
    3. after session ends, computer is off, when return ... new positions of the dragged and dropped elements are retained;

    4. and biggest deal is that there are hidden elements that are accessed by a click on the dragged element after it is in it's new position, like a hidden spry bar and tool tip; those hidden elements need to stay hidden until called upon by a click on the dragged element.

    trying to not create a conflict with the clicking on the element to "drag and drop" vs. clicking on that same element to "reveal" the hidden spry bar or the hidden tool tip.

    been trying to change up to something like shiftKey+click for revealing hidden elements or even cntrlKey+click for dragging and dropping.

    CAN get the shiftKey+click to work like this:
    (well, that is, it works for the whole document)

    Code:
    <script type="text/javascript">
                    $(document).click(function(e) { 
                        if (e.shiftKey) { 
                            
                             alert("shift+click") 
                             //  just to make sure it works //
                        }  
                    }); 
    </script>
    but CANNOT get the shiftKey+click to work like this:
    (when specify an element id)(seems strange?)

    Code:
    <script type="text/javascript">
                    $('#cpqcSelect').click(function(e) { 
                        if (e.shiftKey) { 
                           
                           alert("shift+click") 
                           //  just to make sure it works //
                        }  
                    }); 
    </script>
    not sure why?

    any ideas or links?

    thanks,
    Paul Williams

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your code should work but it depends what kind of element 'cpqcSelect' is. That is, is it an element that can receive a click event? Or is this event received by it's parent, or a child element?

    Try it with a simple div first, to prove that it works. Then try changing your code so that is is attached to either the parent, or a child, of 'cpqcSelect'.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Paul Williams (07-22-2012)

  • #3
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    Andrew,
    thanks for the reply.
    yes, "cpqcSelect" is a stand alone DIV that receives a click.

    problem seems to be, once i turn on a "drag and drop" script, then the browser is listening for a click to run the drag and drop routine and all the other clickable items are nullified..

    that is why i was trying to use shiftKey+click to give either the drag and drop something different to go on, or by the same way, give the other clickable elements something different to go on.

    but for some reason it doesn't want to work.
    drag and drop scripts seem to override everything, that in itself seems a little odd. i would think that drag and drop is nothing but another simple routine to get something done and not able to overide all other functions.

    ideas?

    thanks,
    Paul

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you are trying to attach both a drag and a click event to the same element then there is an essential conflict between these two events. Dragging generally involves a click, or mousedown, event to initiate the process.

    I would suggest having a checkbox that binds and unbinds the drag/click events to the element(s). Or use click on a completely separate element to the draggable one.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Paul Williams (07-22-2012)

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Here's one that I've been using, I got it off a page someone who doesn't write code had, and they didn't give credit for it, but it's well written, and I don't know who to credit for it. I use it as an external file, you just need to give draggable items a class="drag".
    Code:
    <script type="text/javascript">
    function $(id){
    	return document.getElementById(id);
    }
    
    var _startX = 0;			// mouse starting positions
    var _startY = 0;
    var _offsetX = 0;			// current element offset
    var _offsetY = 0;
    var _dragElement;			// needs to be passed from OnMouseDown to OnMouseMove
    var _oldZIndex = 0;			// we temporarily increase the z-index during drag
    var _debug = $('debug');	// makes life easier
    
    
    InitDragDrop();
    
    function InitDragDrop()
    {
    	document.onmousedown = OnMouseDown;
    	document.onmouseup = OnMouseUp;
    }
    
    function OnMouseDown(e){	
    	if (e == null) 
    		e = window.event; 
    		
    	var target =  e.target != null ? e.target : e.srcElement;
    		
    	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag')	{
    		_startX = e.clientX;
    		_startY = e.clientY;
    		
    		_offsetX = ExtractNumber(target.style.left);
    		_offsetY = ExtractNumber(target.style.top);	
    		
    		_oldZIndex = target.style.zIndex;
    		target.style.zIndex = 10000;		
    		_dragElement = target;	
    		
    		document.onmousemove = OnMouseMove;
    		
    		document.body.focus();
    		
    		document.onselectstart = function () { return false; };
    		
    		target.ondragstart = function() { return false; };
    		
    		return false;
    	}
    }
    
    function ExtractNumber(value)
    {
    	var n = parseInt(value);
    	
    	return n == null || isNaN(n) ? 0 : n;
    }
    
    function OnMouseMove(e)
    {
    	if (e == null) 
    		var e = window.event; 
    
    	// this is the actual "drag code"
    	_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
    	_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    	
    }
    
    function OnMouseUp(e)
    {
    	
    	if (_dragElement != null)	{
    		_dragElement.style.zIndex = _oldZIndex;
    
    		// we're done with these events until the next OnMouseDown
    		document.onmousemove = null;
    		document.onselectstart = null;
    		_dragElement.ondragstart = null;
    
    		// this is how we know we're not dragging
    		_dragElement = null;		
    	}
    }
    	</script>
    Last edited by DrDOS; 07-22-2012 at 03:53 PM.

  • Users who have thanked DrDOS for this post:

    Paul Williams (07-22-2012)

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @DrDos I use the same code but, like you, I don't know who created it.

    It uses mousedown and mouseup events, so would be tricky to also incorporate a click event on the same element.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    Paul Williams (07-22-2012)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    try

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .drag {
      position:absolute;z-Index:101;left:10px;top:10px;width:100px;height:50px;background-Color:red;
    }
    
    /*]]>*/
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcDrag={
    
     init:function(){
      this.addevt(document,'mousedown','down');
      this.addevt(document,'mousemove','move');
      this.addevt(document,'mouseup','up');
     },
    
     down:function(e){
      var obj= e.target?e.target:e.srcElement;
      if (obj&&obj.className == 'drag'){
       this.xy=[e.clientX,e.clientY];
       obj.style.zIndex=this.int(obj,'z-Index')+1;
       this.drag=obj;
       document.body.focus();
       document.onselectstart = function () { return false; };
       obj.ondragstart = function() { return false; };
       return false;
      }
     },
    
     move:function(e){
      if (this.drag){
       var xy=[e.clientX,e.clientY];
       this.drag.style.left=this.int(this.drag,'left')+xy[0]-this.xy[0]+'px'
       this.drag.style.top=this.int(this.drag,'top')+xy[1]-this.xy[1]+'px'
       this.xy=xy;
      }
     },
    
     up:function(e){
      if (this.drag){
       this.drag.style.zIndex=this.int(this.drag,'z-Index')-1;
       document.onselectstart=null;
       this.drag.ondragstart=null;
       this.drag=false;
      }
     },
    
     int:function(o,p){
      return parseInt(this.style(o,p));
     },
    
     style:function(o,p){
      if (o.currentStyle){
       return o.currentStyle[p.replace(/-/g,'')];
      }
      return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
     }
    
    }
    
    zxcDrag.init();
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div class="drag" >2</div>
    <div class="drag" >1</div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    Paul Williams (07-22-2012)

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    thank you all for your help
    i'll give both routines a try

    your right, the trick has been that the element being dragged is also being clicked for other things.

    Andrew, to "checkbox" for bind/unbind should be fairly easy.
    thinking out loud, i could set up an input button or checkbox to enable the drag feature or disable it. once its off, then all normally clicking functions would be active.

    i did find a site offering draggable's
    www.script.aculo.us
    which offers alot of nice looking visual effects, drag and drop being one.

    will try that one to.
    time to get to work.
    have to deliver the goods on tuesday evening.

    thanks all,
    Paul

    ps. will log back on and post results

  • #9
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    I read your description all the way through, and you can use the script that I gave you, just use it in conjunction with the checkbox and an if statement to disable it and to enable the other features. You're probably going to need to make a cookie on the users machine to save all that information, you have quite a bit of coding to do.

  • Users who have thanked DrDOS for this post:

    Paul Williams (07-23-2012)

  • #10
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    DrDOS,
    thanks, i'm still working trying to get this going.
    no luck yet.

    one thing odd to me.
    when i install your entire script, all my hidden elements show up on the page and my image element, which is a child of the draggable element, hides.

    i isolated it to this function:
    Code:
    function $(id){
    	return document.getElementById(id);
    }
    from your script.

    why would this cause all hidden elements to suddenly appear?
    and hide the child image of the intended draggable element?

    thanks,
    Paul

  • #11
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by Paul Williams View Post
    DrDOS,
    thanks, i'm still working trying to get this going.
    no luck yet.

    one thing odd to me.
    when i install your entire script, all my hidden elements show up on the page and my image element, which is a child of the draggable element, hides.

    i isolated it to this function:
    Code:
    function $(id){
    	return document.getElementById(id);
    }
    from your script.

    why would this cause all hidden elements to suddenly appear?
    and hide the child image of the intended draggable element?

    thanks,
    Paul
    I don't know off hand. One thing though, if you put the link to the file in the head section remove this from it

    InitDragDrop();

    and put some script tags at the bottom of the body and put that inside them. That function needs to be called after javascript reads the elements in the body. That might actually correct the problem since javascript may stop if it can't find what the script calls for.

  • #12
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    thank you all,

    DrDOS, i hadn't considered that the browser was kicking out pryor to finishing reading all the javascript in the head. that would actually make some sense, i'll work on that.

    Susan, cpqcSelect is actually a child of the main DIV that i'm wanting to drag. here is the code:
    Code:
            <div id="cpqcRange" class="drag" >         
              <img id="cpqcRangeImg"  src="images/cpqc/cpqcHidden.png" width="40" height="40" />
              <div id="cpqc_toolbar" >
    	        <a href="#">
                    <div id="cpqcSelectImgUnitInfo" class="selectBar2" rel="#cpqc_tooltip">Unit Info
                    </div></a>
                    
                    <a href="#">
                    <div id="cpqcSelectRadioCheck" class="selectBar2">Radio Check
                    </div></a>
                    
                    <div id="cpqc_tooltip">
                     		<p><?php echo $row_rsUnitInfoCPQC['unitInfo']; ?></p>
                                          	</div>  <!--  end DIV cpqc_tooltip  -->
                    
           	    </div>  <!--  end DIV cpqc_toolbar  -->
           </div>  <!-- end DIV cpqcRange  -->
    i agree, it should work, unless i'm doing something really stupid and have just been looking at it way to long.

    i'll keep pounding on this until i get it.
    thank you,
    Paul

  • #13
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    Ladies and Gentlemen,

    i'd like to ask a question:

    when the browser reads your code, as best i understand it, the browser reads top down, head first, body second, yes?

    what your saying is that if the browser is reading thru the head and finds something it does not recognize, then the browswer will stop reading the head and jump right to the body, yes?

    if that's the case, then the browser is stopping short of my "hide" statements for all the child elements that i have hidden on the page, and jumping straight to the body, thus bypassing any "hidden" effects, yes?
    possibly yes?

    i listed the drag and drop script into the head of my page, just above where i'm declaring things to be hidden:
    Code:
    $(document).ready(function( ) {     
    					$('#index2_noActivityBanner').hide();
    					$('#cpqc_toolbar').hide();
    					$('#zero25m_toolbar').hide();
    					$('#m16rf_toolbar').hide();
    					$('#landNav_toolbar').hide();
    maybe that is why all the hidden elements are showing up? yes? possibly yes?

    will keep drudging away.
    thanks all,
    Paul

    ps. i'm sure you all heard about the Colorado Springs fires that devestated so many homes. i was there supporting the communications for the National Guard Security Forces, i am Nat.Guard also and was a member of that security mission. what i wanted to share from a first hand experience is the love and generosity of SO MANY people to aid and help those who lost everything. it was humbling and honorable at the same time. the amount of giving was phenominal, and still is, my hat is off and i bow a knee to ALL those who have given so much and are still giving. these victims of the fire lost literally everything, nothing but scorched earth left behind. yet they smile and receive the love and generosity of so many. to all those i say thank you and God bless you. i thought about putting up a short website with pics of our mission, so that all could get a look at first hands on helping. if i do, i will post a link.

  • #14
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You can put all the 'hide' functionality in the bottom of the script, at the bottom of the body tag. You can use an old fashioned but still very effective method of finding what is stopping the script from completing, by just placing 'lerts down the page.

    alert(0);
    alert(1);

    ect. You can use Firefox Firebug to check for errors. You can use a piece of old code that I still use on pages because it automatically alerts to errors, which is very convenient.
    Code:
    <script type="text/javascript">
    //Alerts to errors.
    window.onerror=function(msg, url, linenumber){var logerror='Error message: ' + msg + '. Url: ' + url + 'Line Number: ' + linenumber;alert(logerror);return false}
    </script>
    I admire your persistence and patience, you WILL get this working.

  • Users who have thanked DrDOS for this post:

    Paul Williams (07-24-2012)

  • #15
    New Coder
    Join Date
    Dec 2011
    Posts
    59
    Thanks
    51
    Thanked 1 Time in 1 Post
    yes, i think i will do that.
    also, there's just to much "clicking" going on the pages of my site.
    think i will strip it down to nothing and start over.
    start with the basic needs, add the drag/drop, then add more functions.
    shoud only take a day or two.

    will not stop until its working.

    Paul


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •