javascriptでボタンを移動する際の問題点

こんにちは私はボタンを含む部門を持っています。私は同じ部門内のテーブル内のグループにしたいですが、私はそれらをクリックしようとすると、最後のボタンは使用可能です。これは、私はあなたがいくつかの問題があると思う...javascriptでボタンを移動する際の問題点

function properties(){ 
//This function gives to all of the elements inside 
//the widgetsCol that create the pages. 
wdgBox = document.getElementById('widgetsCol'); 
$(wdgBox).first().before("<TABLE id='wdgTbl' border='1'><TBODY id='wdgBod'></TABLE>"); 
tr = document.createElement('TR'); 
$("#wdgBod").append(tr); 
cont = 0; 
$(wdgBox).children().each(function(index, elmnt){ 
    td = document.createElement('TD'); 
    $(tr).append(td) 
    $(elmnt).appendTo(td); 
    $(elmnt).attr('new', 'true');//Add the new attribute to the element. 
    makeDrag(elmnt);//And make it draggrable. 
    if (cont == 2){ 
     cont = 0; 
     tr = document.createElement('TR'); 
     $("#wdgBod").append(tr); 
    }else{ 
     cont += 1; 
    } 
});} 


<html><head father="*html" id="header"> 
     <title father="*head" id="ttl">KarinApp(Karina Application Web Maker)</title> 
       <link href="http://www.karinapp.com/favicon.ico" id="favIcon" rel="SHORTCUT ICON"> 
      <link href="http://www.karinapp.com/modules/general/css/karinapp-style/jquery-ui-1.8.4.custom.css" id="jQueryUI" rel="Stylesheet" type="text/css"> 
     <link father="*head" href="http://www.karinapp.com/modules/appgen/css/main.css" id="general_css" rel="stylesheet" type="text/css"> 
     <script father="*head" id="SCRIPT1" src="http://www.karinapp.com/modules/general/scripts/jQuery.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT2" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.core.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT3" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.widget.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT4" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.mouse.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT5" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.draggable.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT6" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.droppable.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT8" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.position.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT9" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.resizable.js" type="text/javascript">\\n<!--empty--></script> 
     <script id="SCRIPT10" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.dialog.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.button.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT12" src="http://www.karinapp.com/modules/general/scripts/ui/jquery.ui.autocomplete.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT13" src="http://www.karinapp.com/modules/general/scripts/general.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT14" src="http://www.karinapp.com/modules/general/scripts/Catcher.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT15" src="http://www.karinapp.com/modules/general/scripts/loadPage.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT16" language="javascript" src="http://www.karinapp.com/modules/general/scripts/editor/edit_area_full.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT17" src="http://www.karinapp.com/modules/appgen/scripts/main.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT18" src="http://www.karinapp.com/modules/appgen/scripts/config.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT19" src="http://www.karinapp.com/modules/appgen/scripts/style.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT20" src="http://www.karinapp.com/modules/appgen/scripts/scripts.js" type="text/javascript"><!--empty--></script> 
     <script father="*head" id="SCRIPT21" src="http://www.karinapp.com/modules/appgen/scripts/properties.js" type="text/javascript"><!--empty--></script> 
     <script id="SCRIPT22" type="text/javascript"> 
      window.onload = function(){ 
       postLoad(); 
      } 
         function __init__(){ 
           main(); 
         } 
     </script> 
     <link type="text/css" rel="stylesheet" father="*head" id="5ads4f54adsf5_css" href="http://www.karinapp.com/modules/5ads4f54adsf5/css/main.css"></head> 
<body id="general_bod" key="f5f521844f99caeb1bd3a9063a814c47aae99052"> 
<div father="*html" id="body" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; " pathcls="modules/5ads4f54adsf5/css/main.css:#body"><!--empty--></div> 
           <div class="ground_div" father="*body" id="optionsDiv" style="position: fixed; "> 
       <button father="@optionsDiv" id="addwdg_inp" state="open" type="button" value="Agregar componente" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Agregar componente</span></button> 
       <button father="@optionsDiv" id="addPg_inp" type="button" value="Guardar Pagina" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Guardar Pagina</span></button> 
       <button father="@optionsDiv" id="addPD_inp" type="button" value="Crear PostData" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear PostData</span></button> 
       <button father="@optionsDiv" id="addBT_inp" type="button" value="Crear Instrucciones" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Crear Instrucciones</span></button> 
     </div><div style="outline-width: 0px; outline-style: initial; outline-color: initial; height: auto; width: 250px; position: absolute; top: 0px; left: 1100px; display: block; z-index: 1002; " class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-WdgCol"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on"><span class="ui-dialog-title" id="ui-dialog-title-WdgCol" unselectable="on">Componentes Basicos</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on"><span class="ui-icon ui-icon-closethick" unselectable="on">close</span></a></div><div class="properties_div ui-dialog-content ui-widget-content" father="*body" id="WdgCol" main="true" style="width: auto; min-height: 0px; height: 354px; "> 
       <label father="@WdgCol" for="container" id="cnt_lab">Contenedor:</label><select father="@properties_div" id="container"><option father="container" id="1" value="body">Body</option></select> 
       <table id="wdgTbl" border="1"><tbody id="wdgBod"><tr><td><button id="a" tag="a" new="true" style="position: relative; " class="ui-draggable">A</button></td><td><button id="area" tag="area" new="true" style="position: relative; " class="ui-draggable">AREA</button></td><td><button id="audio" tag="audio" new="true" style="position: relative; " class="ui-draggable">Audio</button></td></tr><tr><td><button id="base" tag="base" new="true" style="position: relative; " class="ui-draggable">BASE</button></td><td><button id="0bdo" tag="bdo" new="true" style="position: relative; " class="ui-draggable">BDO</button></td><td><button id="inp" tag="input" typ="button" new="true" style="position: relative; " class="ui-draggable">Input(Button)</button></td></tr><tr><td><button id="button" tag="button" new="true" style="position: relative; " class="ui-draggable">Button</button></td><td><button id="code" tag="code" new="true" style="position: relative; " class="ui-draggable">Code</button></td><td><button id="col" tag="col" new="true" style="position: relative; " class="ui-draggable">Column</button></td></tr><tr><td><button id="clg" tag="colgroup" new="true" style="position: relative; " class="ui-draggable">Colgroup</button></td><td><button id="dl" tag="dl" new="true" style="position: relative; " class="ui-draggable">DL</button></td><td><button id="div" tag="div" new="true" style="position: relative; " class="ui-draggable">DIV</button></td></tr><tr><td><button id="form" tag="form" new="true" style="position: relative; " class="ui-draggable">Form</button></td><td><button id="h1" tag="h1" new="true" style="position: relative; " class="ui-draggable">H1</button></td><td><button id="img" tag="img" new="true" style="position: relative; " class="ui-draggable">Image</button></td></tr><tr><td><button id="input" tag="input" typ="checkbox" new="true" style="position: relative; " class="ui-draggable">Input(Checkbox)</button></td><td><button id="inp" tag="input" typ="file" new="true" style="position: relative; " class="ui-draggable">Input(file)</button></td><td><button id="inp" tag="input" typ="hidden" new="true" style="position: relative; " class="ui-draggable">Input(Hidden)</button></td></tr><tr><td><button id="inp" tag="input" typ="image" new="true" style="position: relative; " class="ui-draggable">Input(Image)</button></td><td><button id="inp" tag="input" typ="radio" new="true" style="position: relative; " class="ui-draggable">Input(Radio)</button></td><td><button id="input" tag="input" typ="text" new="true" style="position: relative; " class="ui-draggable">Input(Text)</button></td></tr><tr><td><button id="lbl" tag="label" new="true" style="position: relative; " class="ui-draggable">Label</button></td><td><button id="link" tag="link" new="true" style="position: relative; " class="ui-draggable">Link</button></td><td><button id="map" tag="map" new="true" style="position: relative; " class="ui-draggable">Map</button></td></tr><tr><td><button id="meta" tag="meta" new="true" style="position: relative; " class="ui-draggable">Meta</button></td><td><button id="obj" tag="object" new="true" style="position: relative; " class="ui-draggable">Object</button></td><td><button id="ol" tag="ol" new="true" style="position: relative; " class="ui-draggable">OL</button></td></tr><tr><td><button id="inp" tag="input" typ="password" new="true" style="position: relative; " class="ui-draggable">Input(Password)</button></td><td><button id="p" tag="p" new="true" style="position: relative; " class="ui-draggable">P</button></td><td><button id="pre" tag="pre" new="true" style="position: relative; " class="ui-draggable">PRE</button></td></tr><tr><td><button id="inp" tag="input" typ="reset" new="true" style="position: relative; " class="ui-draggable">Input(Reset)</button></td><td><button id="smp" tag="samp" new="true" style="position: relative; " class="ui-draggable">Samp</button></td><td><button id="srpt" tag="script" new="true" style="position: relative; " class="ui-draggable">Script</button></td></tr><tr><td><button id="sel" tag="select" new="true" style="position: relative; " class="ui-draggable">Select</button></td><td><button id="spn" tag="span" new="true" style="position: relative; " class="ui-draggable">Span</button></td><td><button id="stl" tag="style" new="true" style="position: relative; " class="ui-draggable">Style</button></td></tr><tr><td><button id="inp" tag="input" typ="submit" new="true" style="position: relative; " class="ui-draggable">Input(submit)</button></td><td><button id="tbl" tag="table" new="true" style="position: relative; " class="ui-draggable">Table</button></td><td><button id="tbody" tag="tbody" new="true" style="position: relative; " class="ui-draggable">TBody</button></td></tr><tr><td><button id="txt" tag="textarea" new="true" style="position: relative; " class="ui-draggable">TextArea</button></td><td><button id="tfoot" tag="tfoot" new="true" style="position: relative; " class="ui-draggable">TFoot</button></td><td><button id="thead" tag="thead" new="true" style="position: relative; " class="ui-draggable">THead</button></td></tr><tr><td><button id="ul" tag="ul" new="true" style="position: relative; " class="ui-draggable">UL</button></td><td><button id="var" tag="var" new="true" style="position: relative; " class="ui-draggable">Var</button></td><td><button id="video" tag="video" new="true" style="position: relative; " class="ui-draggable">Video</button></td></tr><tr></tr></tbody></table><div father="@WdgCol" id="widgetsCol"> 

       </div> 
       <hr father="@WdgCol" id="hr0"> 
       <button father="@WdgCol" id="openPal">Abrir Paleta</button> 
    </div><div class="ui-resizable-handle ui-resizable-n" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-e" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-s" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-w" unselectable="on"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 1002; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 1003; " unselectable="on"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 1004; " unselectable="on"></div></div></body></html>

出典

2011-01-20 hidura

やあ、あなたは同様にそれ用のHTMLを含めることができます。 – melaos

まず第一に、あなたのコードは醜いです - 私はこれを言わなければなりません。 jqueryセレクタとnativ jsセレクタを混在させないでください。 'var'を使ってwdgBoxのような変数を初期化します。変数名の単語を圧縮しませんが、長期的には高速ではありません。これまでのところとても良いです。 pls。言及されたメラオスとしてあなたのhtmlを示してください。 – helle

私はコードを入れました。 – hidura

機能である：あなたが不足している

1） ";"文の末尾から：『

3）との論理『

$(tr).append(td)

2）あなた/ TBODY続き、』複雑である「TBODY」要素は、閉鎖を持っていない』と不備することができます。 1行につき3つの「td」要素を作成しているように見えますが、わかりません。

コード自体については、「Helle」に同意する必要があります以下の方法：

function properties(){ 
//This function gives to all of the elements inside 
//the widgetsCol that create the pages. 
    var wdgTr, cont = 0, wdgBox = $('#widgetsCol'); 

    // Create the table skeleton 

    $(wdgBox).first().before("<table id='wdgTbl' border='1'><tbody id='wdgBod'></tbody></table>"); 
    wdgTr = $('<tr \>').appendTo('#wdgBod'); 

    $(wdgBox).children().each(function(index, element){ 
     $('<td />').append($(element)).appendTo(wdgTr); 
     $(element).attr({new: 'true'}); // Add the new attribute to the element 
     makeDrag(element);    // Make it draggable 

     if (cont != 2) {cont++;} else {cont = 0; wdgTr = $('<tr \>').appendTo(wdgBod);} 
    }); 
}

私がめざしuldはまた、あなたが "cont"を使って何をしているのかをより明白にするためにいくつかのコメントを追加します。

よろしくニール

出典

2011-01-20 12:00:59 Neil

javascriptでボタンを移動する際の問題点

答えて

関連する問題