Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Как мышкой перемещать Div блок? (https://javascript.ru/forum/misc/2261-kak-myshkojj-peremeshhat-div-blok.html)

hogart 30.03.2009 08:46

Simon, в IE нельзя сделать так, чтобы перемещаемый элемент был выше селектов, радио-баттонов и т.п.
Дело в том, что эти элементы рисуются IE системными средствами и после всего остального.
Насчет фреймов — не уверен.

Либо забить, либо реализовать свой селект:)

Simon 30.03.2009 14:47

hogart,сделать можно, но как правильно не получается. Делается это через фреймы, когда я делал, фрэйм перекрывает основной блок, и взяться уже за перемещаемый блок нельзя(поскольку фрейм заполнил всю часть перемещаемого блока), но селект(список) в это время спрятан за перемещаемый блок.
А можно ли както средствами ява скрипта сделать, ну тоже чтобы компактно и не не большой код был?

hogart 30.03.2009 16:24

Simon, перетаскивайте блок, который почти весь состоит из фрейма. *пожимает плечами* Как-то так, наверное…

Stern87 21.04.2009 07:12

Большое спасибо!
 
Код linbis очень сильно помог. Слегка доработав получил именно то, что нужно!
Спасибо!:thanks:

Simon 21.04.2009 17:40

Stern87, класно, подскажи если есть возможность как доработал?

тот код действительно хороший, но я в ява скриптах очень мало разбираюсь и сделать мне будет очень сложно, былбы признателен если покажешь пример в работе :rolleyes:

Stern87 21.04.2009 23:09

Доработанный пример в работе

bugmenot 16.03.2010 21:35

Цитата:

Сообщение от linbis (Сообщение 15364)
function $(v) { return(document.getElementById(v)); }
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }
function xy(e,v) { return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX)); }

function dragOBJ(d,e) {

    function drag(e) { if(!stop) { d.style.top=(tX=xy(e,1)+oY-eY+'px'); d.style.left=(tY=xy(e)+oX-eX+'px'); } }

    var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;

    document.onmousemove=drag; document.onmouseup=function(){ stop=1; document.onmousemove=''; document.onmouseup=''; };

}

<div style="position: relative; top: 0; left: 0" onmousedown="dragOBJ(this,event); return false;">test</div>

А как можно сделать чтобы DIV перемещался только внутри выделенной области? А то так он по всей странице свободно перемещается.

mycrashedmind 04.08.2011 21:17

попроще и с jquery
var mouse_event = 0
				var differenceX = 0
				var differenceY = 0
				$('#dialog_title').mousedown(function(e){
					differenceX = e.pageX-parseInt($('#dialog').css('left'))
					differenceY = e.pageY-parseInt($('#dialog').css('top'))
					mouse_event=1
				})
				document.onmouseup = function(){
					mouse_event = 0
				}
				document.onmousemove = function(e){
					if (mouse_event == 1){
						$('#dialog').css('left',e.pageX-differenceX)
						$('#dialog').css('top',e.pageY-differenceY)
					}
				}

<div id="dialog">
<div id="dialog_title">Title<spa id="dialog_close" style="position:absolute;right:5px;top:3px;cursor: hand;"></span></div>
<div id="dialog_content"></div>
</div>

MartbIshka 16.10.2011 19:54

Спасибо за полезный скрипт. Добавила вместо position:relative position:fixed и блок стал перемещаться при прокрутке(удобно не нужно его вниз страницы самому тащить).

Спрашивали, что бы перемещался в нужной области. Для этого следует в документе требуемый блок записать в родительский блок, в пределах которого нужно перемещать.

Deself 19.05.2012 18:24

А как сделать чтобы при достижении определёных координат блок останавливался?


Часовой пояс GMT +3, время: 23:58.