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>
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
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.
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
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>
@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
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.
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.
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?
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.
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
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:
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.
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.
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.
Before you post, read our: 
but, like you, I don't know who created it.
