Help me about Drag and drop

Discussion in 'JavaScript' started by micheal9000, Jun 2, 2009.

0
  1. #1
    Anybody helps me please ! I did drag-drop form on javascript, but I dont know it's very bad ! --> on FF, Safari, ... veryyyyyy badddd ! on IE, it seem better, but also bad ! I don't know why ? please help me !!!

    This is html 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Yahoo! Messenger for Web 1.0.</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/js.js">
</script>
</head>

<body>
	<div id="container">
    	<div id="taskwin">
        	<div class="right"></div>
            <div class="center" id="dragdrop"></div>
            <div class="left"></div>
        </div>
        <div id="mainwin">
        	<div class="display">
            </div>
            <div class="bottom">
            	<div class="input">
                	<input type="text" id="txtinp" />
                </div>
                <div class="send">
                	<input type="button" id="btsend" value="Send"/>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
    Code (markup):
    This is css code
    
@charset "utf-8";
body {
	background-image:url(../images/background.png);
}

#container{
	position:absolute;
	width:400px;
	height:300px;
}

#taskwin{
	height:25px;
	width:400px;
}

#taskwin .right{
	height:25px;
	width:42px;
	background-image:url(../images/formleft.png);
	float:left;
}

#taskwin .left{
	height:25px;
	width:42px;
	background-image:url(../images/formright.png);
	float:left;
}

#taskwin .center{
	height:25px;
	width:316px;
	background-image:url(../images/form.png);
	float:left;
}

#mainwin{
	background-image:url(../images/form.png);
	display:inline-block;
}

#mainwin .display{
	height:200px;
	width:380px;
	background-color:#FFF;
	margin:10px 10px;
}

#mainwin .bottom{
	width:380px;
	height:50px;
	margin-left: 10px;
}

#mainwin .bottom .input{
	height:50px;
	width:320px;
	float:left;
}

#mainwin .bottom .send{
	height:50px;
	width:50px;
	margin-left:10px;
	float:left;
}

#txtinp{
	width:320px;
	height:35px;
}

#btsend{
	width:50px;
	height:40px;
}
    Code (markup):
    And this is javascript code
    
// JavaScript Document
document.onmousemove = moveWin;

var isMouseDown = false;
var x = 0;
var y = 0;

function MouseDown(evt){
	isMouseDown = true;
	if (!evt) evt = window.event;
	x = evt.clientX;
	y = evt.clientY;
}

function MouseUp(evt){
	isMouseDown = false;
	if (!evt) evt = window.event;
}

function moveWin(evt){
	var win = document.getElementById("container");
	document.getElementById("container").onmouseup = MouseUp;
	document.getElementById("dragdrop").onmousedown = MouseDown;
	
	if (!evt) evt = window.event;
	if (isMouseDown==true){
		win.style.left = evt.clientX - x;
		win.style.top = evt.clientY - y;
	}
}
    Code (markup):
    Help me please ! :(
     
    micheal9000, Jun 2, 2009 IP
  2. xlcho

    xlcho Guest

    Messages:
    532
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I don't have the time to test your code, but I can suggest you to check this drag and drop script, compare it to yours, and I guess you'll see where the problem is :)
     
    xlcho, Jun 2, 2009 IP
  3. dean5000v

    dean5000v Peon

    Messages:
    201
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    use jquery it becomes alot easier, just google jquery drag and drop
     
    dean5000v, Jun 3, 2009 IP