Разграничить элементы

156

14 января 2019, 12:20

Подскажите пожалуйста, есть код по перетаскиванию элементов.

/* определим тип браузера */ 
var bIE = 0; 
bOp = 0; 
bFF = 0; 
var verBr = navigator.userAgent; 
if (verBr.indexOf("Opera") != -1) 
  bOp = 1; 
else { 
  if (verBr.indexOf("MSIE") != -1) 
    bIE = 1; 
  else { 
    //if (verBr.indexOf("Firefox")!=-1) 
    bFF = 1; 
  } 
} 
setup_mouse("div_okno1", "zagol_okno1"); 
var obj_okno; 
var obj_zagol_okno; 
delta_x = 0; 
delta_y = 0; 
 
function setup_mouse(id_div_okno, id_div_zagol) { 
  obj_okno = document.getElementById(id_div_okno); 
  obj_zagol_okno = document.getElementById(id_div_zagol); 
  obj_zagol_okno.onmousedown = save_delta_koor; 
  if (bOp || bFF) { 
    obj_zagol_okno.addEventListener("onmousedown", save_delta_koor, false); 
  } 
  document.onmouseup = clear_delta_koor; 
} 
 
function save_delta_koor(obj_evt) { 
  if (obj_evt) { 
    x = obj_evt.pageX; 
    y = obj_evt.pageY; 
  } else { 
    x = window.event.clientX; 
    y = window.event.clientY; 
    if (bIE) { 
      y -= 2; 
      x -= 2; 
    } 
  } 
  x_okno = obj_okno.offsetLeft; 
  y_okno = obj_okno.offsetTop; 
  delta_x = x_okno - x; 
  delta_y = y_okno - y; 
  document.onmousemove = motor_okno; 
  if (bOp || bFF) 
    document.addEventListener("onmousemove", motor_okno, false); 
} 
 
function clear_delta_koor() { 
  document.onmousemove = null; 
} 
 
function motor_okno(obj_event) { 
  if (obj_event) { 
    x = obj_event.pageX; 
    y = obj_event.pageY; 
  } else { 
    x = window.event.clientX; 
    y = window.event.clientY; 
    if (bIE) { 
      y -= 2; 
      x -= 2; 
    } 
  } 
  new_x = delta_x + x; 
  new_y = delta_y + y; 
  obj_okno.style.top = new_y + "px"; 
  obj_okno.style.left = new_x + "px"; 
}

body { 
  margin: 0px; 
  padding: 0px; 
  font-family: verdana, sans-serif; 
  font-size: 12px; 
} 
 
h1 { 
  text-align: center; 
  margin-top: 10px; 
} 
 
.div_okno { 
  position: absolute; 
} 
 
.div_zagol_okno { 
  cursor: move; 
  background: url("./images/fon_left_zagol.gif") no-repeat; 
  font-weight: bold; 
  color: #8CF4EF; 
} 
 
.div_zagol_okno div { 
  padding-left: 10px; 
  padding-right: 10px; 
  background: url("./images/fon_right_zagol.gif") right top no-repeat; 
} 
 
.div_zagol_okno div div { 
  padding: 3px; 
  background: #7c9992 url("./images/fon_zagol.gif"); 
  white-space: nowrap; 
} 
 
.content_okno { 
  padding: 5px; 
  background: #C0C0C0; 
} 
 
#div_okno1 { 
  top: 120px; 
  left: 300px; 
  width: 300px; 
}

<div id="div_okno1" class="div_okno"> 
  <div id="zagol_okno1" class="div_zagol_okno"> 
    Элемент 1 
  </div> 
  <div id="zagol_okno1" class="div_zagol_okno"> 
    Элемент 2 
  </div> 
</div>

Но в этом коде можно переместить только элемент 1 элемент. Как сделать что бы была возможность переносить элемент 2 без привязки к элементу 1?

Answer 1

$(document).ready(init); 
function init(){ 
$("#myblock").draggable(); 
  $("#myblock2").draggable(); 
}

#myblock 
{ 
background-color: #0f7116; 
width: 220px; 
height: 170px; 
color:#ffffff; 
} 
#myblock2 
{ 
background-color: #0f7116; 
width: 220px; 
height: 170px; 
color:#ffffff; 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Перетаскивание:</title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<link href="css/style.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
 
 
</head> 
<body  > 
    <div id="myblock">Перетащи меня</div> 
    <div id="myblock2">Перетащи меня</div> 
   
</body> 
</html>

Сделал по другому. Вопрос закрыт.