Jump to content
  • 0

Проблема с перемещением div'a

partiz

Asked by partiz,

 Share

Question

partiz Explorer

partiz

Posted
Posted

Необходимо красиво перемещать див по странице. Проблема в том, что все найденные примеры поступают следующим образом: выбираешь что тащить, этот элемент левым верхом переносится к курсору и все перетаскивается. А нужно сделать красиво, чтобы как в винде: зажал левую кнопку мыши в произвольном месте заголовка окна и за это место можно менять расположение этого окна. Помогите пожалуйста сделать так!

Ниже код, который мне понравился, но не показывающий желаемого результата

<HTML>
<HEAD>
 <TITLE>Drag'n'Drop</TITLE>
 <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.maximage {
 padding: 0px;
 border: solid 1px black;
 float: none;
 position: absolute;
 top: 20%;
 left: 15%;
 width: 630;
 FILTER: alpha(Opacity=85);
 display: block;
 z-index: 100;
 font-size: 12px;
}
.titles {
 background: #999999;
 padding: 5px;
 margin: 0px;
 border: solid 1px black;
 float: none;
 position: relative;
 display: block;
 font-size: 16px;
 font-weight: bold;
 color: #000000;
 cursor: move;
}
.bodys {
 background: #FFF;
 padding: 5px;
 margin: 0px;
 border: solid 1px black;
 float: none;
 position: relative;
 color: #000000;
 display: block;
 font-size: 14px;
}
.closes {
 font-size: 14px;
 color: #020167;
 font-weight: normal;
 text-decoration: none;
 font-weight: bold;
 cursor: pointer;
}
</style>
</HEAD>
<SCRIPT language="JavaScript">
var DDob;
function MD(id){
 DDob=document.getElementById(id);
 if(DDob.style.position!='absolute') DDob.style.position='absolute';
}
function MM(e){
 var X,Y;
 if(DDob){
 X=(typeof(e)=='object')? e.clientX : event.clientX;
 Y=(typeof(e)=='object')? e.clientY : event.clientY;
 DDob.style.left=X+document.body.scrollLeft;
 DDob.style.top=Y+document.body.scrollTop;
 return false;
 }
}
function MU(){
 if(DDob){
 DDob=null;
 }
}
document.onmouseup=MU;
document.onmousemove=MM;
</SCRIPT>
<BODY>
<div id="infos" class="maximage">
<div id="infostitle" class="titles" onmousedown="MD('infos');">Окошко</div>
 <div id="infosbody" class="bodys"></div>
 <div id="closes" class="titles2" style="text-align: center" onclick="infos.style.display='none'" title="Нажмите, чтобы закрыть окошко" onclick="if(infos.style.display=='block')infos.style.display='none';else infos.style.display='block'" onmousemove="closes.style.textDecoration='underline'" onmouseout="closes.style.textDecoration='none'"><span class="closes">Закрыть окошко</span></div>
</div>

 <DIV id="simple" style="cursor:move;" onmousedown="MD(this.id);">
 Перетащи меня!
 </DIV>
</BODY>
</HTML>

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
partiz Explorer

partiz

Posted
  • Author
Posted

К сожалению, примеры, приведенные там не помогли мне решить мою проблему :)((

я не очень хорошо знаю javascript.

"http://www.dhtmlgoodies.com/index.html? ? le-content" чтобы можно что-нибудь переместить - то нужно присваивать определенный класс.

"http://debugger.ru/demo/projects/browse ? /move.html" а с этим я вообще, к сожалению, не разобрался :(((

Link to comment
Share on other sites
  • 0
partiz Explorer

partiz

Posted
  • Author
Posted

Я немного исправил код, чтобы посмотреть координаты... все что нужно, это от координаты мыши удалить координату основного слоя... а как это сделать, я не понимаю... (точнее понимаю, но почему-то когда я ставлю X=X-infos.style.left и Y=Y-infos.style.top, тогда почему-то слой сдвигается как раньше и больше не двигается вообще )

<HTML>
<HEAD>
  <TITLE>Drag'n'Drop</TITLE>
  <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.dragableElement {
	padding: 0px;
	border: solid 1px black;
	float: none;
	position: absolute;
	top: 20%;
	left: 15%;
	width: 630;
	FILTER: alpha(Opacity=85);
	display: block;
	z-index: 100;
	font-size: 12px;
}
.maximage {
	padding: 0px;
	border: solid 1px black;
	float: none;
	position: absolute;
	top: 20%;
	left: 15%;
	width: 630;
	FILTER: alpha(Opacity=85);
	display: block;
	z-index: 100;
	font-size: 12px;
}
.titles {
	background: #999999;
	padding: 5px;
	margin: 0px;
	border: solid 1px black;
	float: none;
	position: relative;
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	cursor: move;
}
.bodys {
	background: #FFF;
	padding: 5px;
	margin: 0px;
	border: solid 1px black;
	float: none;
	position: relative;
	color: #000000;
	display: block;
	font-size: 14px;
}
.closes {
  font-size: 14px;
  color: #020167;
  font-weight: normal;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
}
</style>
</HEAD>
<SCRIPT language="JavaScript">
var DDob;
function MD(id){
 DDob=document.getElementById(id);
 if(DDob.style.position!='absolute') DDob.style.position='absolute';
}
function MM(e){
 var X,Y;
 if(DDob){
  X=(typeof(e)=='object')? e.clientX : event.clientX;
  Y=(typeof(e)=='object')? e.clientY : event.clientY;
  tt1.innerHTML = X+"-=-"+Y;
  DDob.style.left=X+document.body.scrollLeft;
  DDob.style.top=Y-+document.body.scrollTop;
  tt2.innerHTML = infos.style.left+"-=-"+infos.style.top;
  return false;
 }
}
function MU(){
 if(DDob){
  DDob=null;
 }
}
document.onmouseup=MU;
document.onmousemove=MM;
</SCRIPT>
<BODY>
<span id="tt1">00-=-00</span>

<span id="tt2">00-=-00</span>
<div id="infos" class="maximage">
<div id="infostitle" class="titles" onmousedown="MD('infos');">Окошко</div>
 <div id="infosbody" class="bodys"></div>
 <div id="closes" class="titles2" style="text-align: center" onclick="infos.style.display='none'" title="Нажмите, чтобы закрыть окошко" onclick="if(infos.style.display=='block')infos.style.display='none';else infos.style.display='block'" onmousemove="closes.style.textDecoration='underline'" onmouseout="closes.style.textDecoration='none'"><span class="closes">Закрыть окошко</span></div>
</div>

 <DIV id="simple" style="cursor:move;" onmousedown="MD(this.id);">
  Перетащи меня!
 </DIV>
</BODY>
</HTML>

Link to comment
Share on other sites
  • 0
alensky Explorer

alensky

Posted
Posted

Пришлось несколько расширить код, добавить переменные и функции, но результат есть.

<HTML>
<HEAD>
 <TITLE>Drag'n'Drop</TITLE>
 <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
.maximage {
 padding: 0px;
 border: solid 1px black;
 float: none;
 position: absolute;
 top: 20%;
 left: 122px;
 width: 630;
 FILTER: alpha(Opacity=85);
 display: block;
 z-index: 100;
 font-size: 12px;
}
.titles {
 background: #999999;
 padding: 5px;
 margin: 0px;
 border: solid 1px black;
 float: none;
 position: relative;
 display: block;
 font-size: 16px;
 font-weight: bold;
 color: #000000;
 cursor: move;
}
.bodys {
 background: #FFF;
 padding: 5px;
 margin: 0px;
 border: solid 1px black;
 float: none;
 position: relative;
 color: #000000;
 display: block;
 font-size: 14px;
}
.closes {
 font-size: 14px;
 color: #020167;
 font-weight: normal;
 text-decoration: none;
 font-weight: bold;
 cursor: pointer;
}
</style>
</HEAD>
<SCRIPT language="JavaScript">
function getTopPos(inputObj)

{ 

 var returnValue = inputObj.offsetTop;

 while((inputObj = inputObj.offsetParent) != null){

 if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

 }

 return returnValue;

}



function getLeftPos(inputObj)

{

 var returnValue = inputObj.offsetLeft;

 while((inputObj = inputObj.offsetParent) != null){

 if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

 }

 return returnValue;

}

var DDob;
var subX, subY;

function MD(id){ 
 DDob=document.getElementById(id);
 if(DDob.style.position!='absolute') DDob.style.position='absolute';
 X=(typeof(id)=='object')? id.clientX : event.clientX;
 Y=(typeof(id)=='object')? id.clientY : event.clientY;
 subX = event.clientX+document.body.scrollLeft - getLeftPos(DDob);
 subY = event.clientY+document.body.scrollTop - getTopPos(DDob);
}

function MM(e){
 var X,Y;
 if(DDob){
 X=(typeof(e)=='object')? e.clientX : event.clientX;
 Y=(typeof(e)=='object')? e.clientY : event.clientY;
 DDob.style.left=event.clientX+document.body.scrollLeft - subX;
 DDob.style.top=event.clientY+document.body.scrollTop - subY;
 return false;
 }
}

function MU(){
 if(DDob){
 DDob=null;
 }
}
document.onmouseup=MU;
document.onmousemove=MM;
</SCRIPT>
<BODY>
<div id="infos" class="maximage">
<div id="infostitle" class="titles" onmousedown="MD('infos');">Окошко</div>
 <div id="infosbody" class="bodys"></div>
 <div id="closes" class="titles2" style="text-align: center" onclick="infos.style.display='none'" title="Нажмите, чтобы закрыть окошко" onclick="if(infos.style.display=='block')infos.style.display='none';else infos.style.display='block'" onmousemove="closes.style.textDecoration='underline'" onmouseout="closes.style.textDecoration='none'"><span class="closes">Закрыть окошко</span></div>
</div>

 <DIV id="simple" style="cursor:move;" onmousedown="MD(this.id);">
 Перетащи меня!
 </DIV>
</BODY>
</HTML>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept