draggable div

36 views
Skip to first unread message

EdZep

unread,
Mar 22, 2012, 12:54:52 PM3/22/12
to greasemon...@googlegroups.com
I'm not the best person to be giving out code samples, but, I've got a
draggable div, and this may help. Not sure if there's another way, and,
I know nothing of jquery, but, this uses listeners for mouseup,
mousedown, and mousemove. The div created elsewhere, and is styled with
a class named "dragme", and I have previously stored a reference to the
div in refTradePanel.

-- Ed

var isdrag = false;
var x, y, tx, ty;

document.addEventListener('mouseup', function(e) {
isdrag=false
}, true);

document.addEventListener('mousedown', function(e) {
var fobj = e.target;
if (fobj.className=="dragme") {
isdrag = true;
tx = parseInt(refTradePanel.style.left+0); // must have been
working
ty = parseInt(refTradePanel.style.top+0); // with different
fudge numbers
x = e.clientX;
y = e.clientY;
}
}, true);

document.addEventListener('mousemove', function(e) {
if(isdrag) {
var setX = tx + e.clientX - x;
var setY = ty + e.clientY - y;

refTradePanel.style.left = setX + "px";
refTradePanel.style.top = setY + "px";
}
}, true);

webm...@phpecono.com

unread,
Mar 23, 2012, 8:24:19 AM3/23/12
to greasemon...@googlegroups.com
Hi edzep Thx for your script i think we can get it to work ... I know some jquerry are not compatible with GM so that's probably why UI was not working ... 
I tryed integrating your script but there seems to be an error somewhere ... mind to take a look?

// ==UserScript==
// @name CF Informer by CyberSee
// @namespace http://**CENSORED**
// @description Critical Fusion
// @include *kabam*
// ==/UserScript==

var isdrag = false;
var x, y, tx, ty;

document.addEventListener('​mouseup', function(e) {isdrag=false}, true);

document.addEventListener('​mousedown', function(e) {
     var fobj = e.target;
     if (fobj.className=="dragme") {
         isdrag = true;
         tx = parseInt(refTradePanel.style.​left+0); // must have been  orking
         ty = parseInt(refTradePanel.style.​top+0); // with different  udge numbers
         x = e.clientX;
         y = e.clientY;
         }
     }, true);

document.addEventListener('​mousemove', function(e) {
     if(isdrag) {
         var setX = tx + e.clientX - x;
         var setY = ty + e.clientY - y;

         refTradePanel.style.left = setX + "px";
         refTradePanel.style.top  = setY + "px";
         }
     }, true);

// Verssion
var version = "1.0.1"; 
window.addEventListener("load", function load(event){

var centerdiv = document.createElement("div");
var dramiscenter, newElement;

centerdiv.innerHTML = '<div class="dragme" style="border:1px solid black; height:410px; width:200px; left:8px; opacity:0.7; background-color:#000000; z-index:3000; position:absolute; top:100px; color:#FFFFFF;"><span style="cursor:move; font-family:verdana; font-size:11px;">Drag me</span><iframe style="height:400px; width:200px; left:8px; opacity:0.7; background-color:#000000;" src="http://**CENSORED**/cf.php"></iframe></div>';
dramiscenter = document.getElementById('sitemap');

if (dramiscenter) {dramiscenter.parentNode.insertBefore(centerdiv, dramiscenter.nextSibling);}

}, false);

webm...@phpecono.com

unread,
Mar 23, 2012, 10:38:24 AM3/23/12
to greasemon...@googlegroups.com
I found a working integration of a draggable div here: http://userscripts.org/scripts/review/47608
Thx anyway.
Reply all
Reply to author
Forward
0 new messages