Форум

BEER_HUNTER · #1 (**permalink**) 22.08.2008, 11:47

Здравствуйте, всем.
Я динамически создаю компоненты на странице:

button= document.createElement('input');
   button.setAttribute("type", "submit");
   button.setAttribute("name", "button1");
   document.body.appendChild(button);

Далее мне необходимо перетаскивать этот компонент.

function mousedown(ev) 
{
    obj = event.srcElement;
}

function mousemove(ev) 
{
 if (obj) 
 {
  
 obj.style.pixelLeft = event.clientX+ document.body.scrollLeft;
 obj.style.pixelTop = event.clientY + document.body.scrollTop;
  return false;
  
 }
};

function mouseup() 
{
 
 obj = null;
}

Проблема заключается в том, что в переменную obj не возвращается элемент, вызвавший событие.
Пробовал делать операцию Drag&Drop если элементы создовать в Dising time все работает. А вот при создании элементов в Run time не работает. Не поскажите в чем проблема? Очень нужна ваша помощь

ZoNT · #2 (**permalink**) 22.08.2008, 12:14

function mousedown(e) 
{
    e = e||window.event;
    obj = e.srcElement||e.target;
}
 
function mousemove(e) 
{
    e = e||window.event;
    if (obj) {
       obj.style.left = e.clientX + document.body.scrollLeft;
       obj.style.top = e.clientY + document.body.scrollTop;
       return false;
    }
}
 
function mouseup() 
{ 
   obj = null;
}

BEER_HUNTER · #3 (**permalink**) 22.08.2008, 12:26

Спасибо ZoNT. Но результат тот же самый
если элементы создовать в Dising time все работает. А вот при создании элементов в Run time не работает.

ZoNT · #4 (**permalink**) 22.08.2008, 12:32

дай ссылку на тестовую страничку или приведи код полнее

BEER_HUNTER · #5 (**permalink**) 22.08.2008, 12:37

Это index.jsp

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My designer!!</title>
    </head>
     <script type="text/javascript" src="javascript.js"></script> 
     <body>
       <select id="choose_element">
         <option>Drop-Down List</option>
        <option>CheckBox</option>
        <option>Button</option>
        <option>Text Input</option>
        <option> Radio Button</option>
        <option> Multi-line Input</option>
    </select>
    <input type="submit" value="Create" name="create" onclick="create_control()" />
    </body>
</html>

А это файл javascript.js

function mousedown(e) 
{
    e = e||window.event;
    obj = e.srcElement||e.target;
}
 
function mousemove(e) 
{
    e = e||window.event;
    if (obj) {
       obj.style.left = e.clientX + document.body.scrollLeft;
       obj.style.top = e.clientY + document.body.scrollTop;
       return false;
    }
}
 
function mouseup() 
{ 
   obj = null;
}

function create_control()
{
   var temp=window.prompt('Введите имя создаваемого элемента','');
   if((temp!='') && (temp!=null))
       {
        elem=document.getElementById("choose_element");
        select_value=elem.selectedIndex;
        switch (select_value) 
        {
            case 0:
                {
                  drop_down_list=document.createElement('select');
                  drop_down_list.setAttribute("name", temp);
                  document.body.appendChild(drop_down_list);  
                }
                break;
            case 1:
                {
                  check_box= document.createElement('input');
                  check_box.setAttribute("type","checkbox");
                  check_box.setAttribute("name", temp);
                  document.body.appendChild(check_box);
                }
                break;
           case 2:
                {
                  button= document.createElement('input');
                  button.setAttribute("type", "submit");
                  button.setAttribute("name", temp);
                  button.setAttribute("style","position:absolute;");
                  document.body.appendChild(button);
                }
                break;
           case 3:
                {
                  edit = document.createElement('input');
                  edit.setAttribute("type", "text")
                  edit.setAttribute("name",temp);
                  document.body.appendChild(edit);
                }
                break;
            case 4:
                {
                  radio=document.createElement('input');
                  radio.setAttribute("type", "radio");
                  radio.setAttribute("name", temp);
                  document.body.appendChild(radio);  
                }
                break;
            case 5:
                  {
                    textarea=document.createElement('textarea');
                    textarea.setAttribute("name",temp);
                   document.body.appendChild(textarea);
                  }
            
         
        }

       }
   
 
}

document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;

ZoNT · #6 (**permalink**) 22.08.2008, 13:12

function mousedown(e) {
    e = e||window.event;
    obj = e.srcElement||e.target;
}
 
function mousemove(e) {
    e = e||window.event;
    if (window.obj) {
       obj.style.left = e.clientX + document.body.scrollLeft;
       obj.style.top = e.clientY + document.body.scrollTop;
       return false;
    }
}
 
function mouseup() { 
	obj = null;
}
 
function create_control() {
   var temp=window.prompt('Введите имя создаваемого элемента','');
   if((temp!='') && (temp!=null)) {
        var elem=document.getElementById("choose_element");
        var e;
        switch (elem.selectedIndex) {
            case 0:
					e=document.createElement('select');
                break;
            case 1:
					e=document.createElement('input');
					e.setAttribute("type","checkbox");
                break;
           case 2:
					e=document.createElement('input');
					e.setAttribute("type", "submit");
                break;
           case 3:
					e=document.createElement('input');
					e.setAttribute("type", "text")
                break;
            case 4:
					e=document.createElement('input');
					e.setAttribute("type", "radio");
                break;
            case 5:
                    e=document.createElement('textarea');
        }
		e.setAttribute("name", temp);
		e.style.position = 'absolute';
		document.body.appendChild(e);
	}
}
 
document.onmousedown = mousedown;
document.onmousemove = mousemove;
document.onmouseup = mouseup;

BEER_HUNTER · #7 (**permalink**) 22.08.2008, 13:32

ZoNT, огромное тебе спасибо!!! ВЫручил.

Форум

Справочник

Discord чат

Курсы javascript