[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 442
  • Last Modified:

Creating a placeholder

I have a group of draggable objects - each object is a small table.  When I drag a table away from its position I want a temporary place holder, (a table with a dotted-line border) to appear where the dragged object originally was.

I have a few questions about how to do this:

Firstly, it seems the place holder object should be created in mousedown, rather than mousemove, because if I put it in mousemove, the place holder will continously get created with every movement of the mouse.  So, mousedown definitely seems like the place to create the placeholder.

Another problem I have is that when the placeholder is initially created with a mousedown click, it appears beneath the original object, and then snaps to the original object's position when the original object is moved out of the way.  But, this is not what it should do.  It should appear BEHIND the original object, so that it can only be seen if the original object is moved away after the mousedown event.

I thought the problem was that it's position needs to be 'absolute', but that doesn't seem to have any affect and the problem still occurs.

Here's the code:

function makeDraggable(item) {
      lpos = getPosition(item);
      item.onmousedown = function(ev) {
            dragObject = this;
            createPlaceHolder(item); // this creates the place holder object
            mouseOffset = getMouseOffset(this, ev);
            return false;
      }
}

function createPlaceHolder()
{
      var pdiv = document.createElement("div")
      var ptable = document.createElement("table");
      var ptbody = document.createElement("tbody");
      var prow = document.createElement("tr");
      var pcell = document.createElement("td");

      prow.appendChild(pcell);
      ptbody.appendChild(prow);
      ptable.appendChild(ptbody);
      pdiv.appendChild(ptable);
      document.getElementById("dragtable").appendChild(pdiv);

      pdiv.setAttribute("class","dragdiv");
      pdiv.setAttribute("position","absolute");
      ptable.setAttribute("height",document.getElementById('dragbox1').clientHeight);
      ptable.setAttribute("class","p_holder");
}

The placeholder should, of course, be deleted on mouseup - but I haven't gotten to that yet.
0
chsalvia
Asked:
chsalvia
  • 6
  • 6
1 Solution
 
ZvonkoSystems architectCommented:
My recommandation is to prepare the placeholder object with all attributes you need and make it hidden by style display:none; and with slightly lower z-index then the draged div.
Then on mouse down you make the place holder div dimensions same as clicked div and move the placeholder to the absolute position same as clicked object.
On mouse up again all you need to do is to make the place holder div display:none;


0
 
chsalviaAuthor Commented:
Okay thanks.  I'm trying to implement that with the below code, but I can't get the placeholder to actually appear on the mousedown event.  Is there something wrong with this code?

function makeDraggable(item) {
      lpos = getPosition(item);
      item.onmousedown = function(ev) {
            document.getElementById("p_holder").style.display="block"; // makes placeholder appear
            dragObject = this;
            mouseOffset = getMouseOffset(this, ev);
            return false;
      }
}

function createPlaceHolder()
{
      var pdiv = document.createElement("div")
      var ptable = document.createElement("table");
      var ptbody = document.createElement("tbody");
      var prow = document.createElement("tr");
      var pcell = document.createElement("td");

      pdiv.setAttribute("id","p_holder");
      pdiv.setAttribute("class","adboxdiv");
      ptable.setAttribute("height",document.getElementById("adbox1").clientHeight);
      ptable.setAttribute("style","display:none");
      ptable.setAttribute("class","atc_spacer");

      prow.appendChild(pcell);
      ptbody.appendChild(prow);
      ptable.appendChild(ptbody);
      pdiv.appendChild(ptable);
      document.getElementById("adtable").appendChild(pdiv);
}
0
 
chsalviaAuthor Commented:
Okay - nevermind, I found the mistake: I was setting the table properties rather than the div properties.

Anyway, to make the placeholder appear in place of the table when the table is dragged, should I set the position of the place holder like this:

function makeDraggable(item) {
     lpos = getPosition(item);
     item.onmousedown = function(ev) {
          document.getElementById("p_holder").style.display="block"; // makes placeholder appear
          document.getElementById("p_holder").style.position="static;top:" + lpos.y + "px" + ";left:" + lpos.x + "px";
         dragObject = this;
          mouseOffset = getMouseOffset(this, ev);
          return false;
     }
}
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
ZvonkoSystems architectCommented:
More like this:


function makeDraggable(item) {
     lpos = getPosition(item);
     item.onmousedown = function(ev) {
          placeHolder = document.getElementById("p_holder");
          placeHolder.style.display="block"; // makes placeholder appear
          placeHolder.style.position="absolute";
          placeHolder.style.top=lpos.y;
          placeHolder.style.left=lpos.x;
         dragObject = this;
          mouseOffset = getMouseOffset(this, ev);
          return false;
     }
}

0
 
chsalviaAuthor Commented:
Right, thanks.

Okay - the problem here is that if I set the placeholder's position to "absolute" it no longer acts as a "spacing object" between draggable objects.

Basically, I have four or more draggable objects, positioned next to each (using a div float property) in a big table.  Now, say I move the first object - the other three immediately reposition themselves to fill in the space where the first one used to be.  Then, when I release the object, it appears back in front of the other three, and the other three are repositioned to where they originally where.

Now, the point of the placeholder object was to avoid this.  So that, for example, if I move the first object, the other three objects stay exactly where they are, because the space where the first object used to be is filled with the place holder.

But - that behavior doesn't happen if I make the placeholder itself "absolute", because then it just floats above the document without actually reserving the space where the dragged item used to be.

So - I'm a bit lost as to what to do.

But - here are two solutions I thought of - I don't know if any of them are viable.

1) Somehow the placeholder needs to be static - although, in pratice, that never works out correctly.  The placeholder always appear as the last element, rather than appearing in place of a dragged element.

2) Maybe, instead of showing/hiding the place holder, I need to create it each time and use insertBefore to put it where it belongs - i.e. in place of a dragged object.

I'd really appreciate any suggestions/input you might have here.
Thanks.
0
 
ZvonkoSystems architectCommented:
Why make life more complicated then it is already?
Move the placeholder and you are done.
On mouseup you move the source element to placeholder final position and hide the placeholder.


0
 
chsalviaAuthor Commented:
But moving the placeholder doesn't actually do anything because it's position is absolute.  It won't actually function as a placeholder - in other words, since it's position is absolute it won't take up space between two elements.  

The point of the placeholder is so that when I move one element - the other elements don't change position.  If the placeholder is absolute it doesn't matter where I move it to - it won't take up space between elements.

Maybe I'm not explaining this well.  For an example of what I'm talking about, go to live.com.  Here there are four draggable boxes.  Now, if you move the top right box, notice that the box below it does not automatically snap up and take its place.  Instead, a place holder appears in place of the top right box, holding its former position.  Certainly, this place holder can't be "absolute", otherwise it wouldn't hold the position.
0
 
ZvonkoSystems architectCommented:
0
 
chsalviaAuthor Commented:
Well, for now I just want to learn how to properly code this type of thing in javascript.  Did you understand what I meant in the above post?  See, the only way I can envision getting this working is using insertBefore - because even though hiding and showing the place holder would be much easier, I don't see how that would achieve the desired effect.  
0
 
ZvonkoSystems architectCommented:
I see what you intend to want, but it is even hard to describe (what you want) and it is more hard to code to work (the way you think that you want).
But in any case it is nothing what is a JavaScript single question for EE.
From a philosofic point of view I can say to you that you confuse a browser window with some grafic application interface. That is absolutely not the intended use. The fact that it can be done dose not legitimate such absurde use of browser interface. And if you still want it, then you have to be at least as good as Microsoft people who make the live.com site.


Cheerio.

0
 
chsalviaAuthor Commented:
I understand what you're saying - but live.com is sort of an extreme example.  I've seen a lot of simple drag & drop interfaces on the Internet, for example at:

http://tool-man.org/examples/edit-in-place.html

 - which just use the technique for sorting lists.  I certainly don't want to create a graphical interface on the level of an OS or something - just something that lets users rearrange objects in the browser window.  Isn't that a reasonable usage of javascript?
0
 
ZvonkoSystems architectCommented:
Not realy.
But If you define a bit more detailed your requirments, then perhaps I could share some ideas how I would design that interface.

0
 
GranModCommented:
PAQed with points refunded (250)

GranMod
Community Support Moderator
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now