0

ドラッグ可能な要素をフォームに追加するスクリプトがあります。

これは、別のスクリプトとそのスクリプトを追加するまでは非常にうまく機能し、その後、前のオンが応答を停止します。どちらのスクリプトも DOM に存在します。

1回目はなんでやめたの？

私が試してみました

$.noConflict()

と

jQuery.noConflict()

しかし、これは完全に機能しなくなります。

ドラッグ可能な要素を追加するスクリプトを以下に示します。

 function createTextBox() {
     //Random name for out text box. users dont see this.

     var textBoxName = 'tb_' + Math.floor(Math.random() * 10000)
     var html_script;

     html_script="<div id='draggable" + textBoxName + "' style='position: absolute; top: 100px; left: 100px;'>" +
              "<img src='../../Images/next.png' style='cursor: pointer;'/><img style='cursor: pointer;' src='../../Images/delete.png' onclick=\"RemoveTextBox('" + textBoxName + "')\"/>" +
              "<a href='#' class='data_field ui-draggable ui-resizable' id='draggable" + textBoxName + "'></a>" +
              "<textarea rows='5' cols='80' title='Text Box' data-tooltip='Tool'" +
              " data-width='100'" +
              " data-height='20'" +
              " data-topx='10'" +
              " data-topy='10" +
              " data-multiline='true'" +
              " data-hidden='false'" +
              " data-type='textBox'" +
              " name='" + textBoxName + "'" +
              " id='" + textBoxName + "'" +
              " class='data_field ui-widget-content ui-corner-all'" +
              " style='background-color: transparent; width: 100px; height: 20px;'>Text Box</textarea> " +
              "</div>" 

     document.getElementById('text_boxes').innerHTML += html_script;

     var java_script = "$(function () {" +
     "            var sh = 0;" +
     "            var sw = 0;" +
     "            $('#draggable" + textBoxName + "').draggable({" +
     "               drag: function (event, ui) {" +
     "                  dragposition = ui.position;" +
     "                  $('#" + textBoxName + "').attr('data-topx', dragposition.left);" +
     "                  $('#" + textBoxName + "').attr('data-topy', dragposition.top);" +
     "              }" +
     "        });" +
     "          $('#" + textBoxName + "').resizable({" +
     "              stop: function (event, ui) {" +
     "                 s = ui.size;" +
     "                 sh = s.height;" +
     "                 sw = s.width;" +
     "                 $('#" + textBoxName + "').attr('data-width', s.width);" +
     "                 $('#" + textBoxName + "').attr('data-height', s.height);" +
     "     }" +
     "  });" +
     "});"

     var script = document.createElement('script');
     script.type = 'text/javascript';
     script.text = java_script;
     document.getElementById("text_boxes").appendChild(script);
 };

誰かが悪いコードだと思っているのに、ほんの数か月しか使っていないのなら、本当に申し訳ありません!

したがって、ユーザーがアイコンをクリックするたびに、ドラッグ可能なボックスが生成されます。その後、ユーザーが別のボックスを生成すると、両方とも移動可能のままになります。

各ボックスのスクリプトを生成せずにそれを行うより良い方法があると確信していますが、まだ知りません!

ありがとう

ありがとう

4

1 に答える 1

0

さて、あなたのコードにはいくつかの問題があります。

(1) ID をランダムと定義しないでください。より多くのボックス = 競合の可能性が高くなります。代わりに、関数の前にカウンターを定義し、内部で更新します。つまり、

var counter = 0;
function createTextBox() {
    var textBoxName = 'tb_' + counter;
    counter++
    // other code

(2) jQuery を使用しているので、それを最大限に活用してください。たとえば、この行：

document.getElementById('text_boxes').innerHTML += html_script;

する必要があります

$( "#text_boxes" ).append( html_script );

変数全体html_scriptは、たとえば次のようになります。

html_script = $( '<div></div>' );
html_script.attr( "id", "draggable"+textBoxName );
html_script.css({
    position : "absolute",
    top : 100
});
html_script.append( $( "<img></img>", { 
    src : "../../Images/next.png", 
    style : "cursor:pointer" 
});
...and so on

さらに良いことに、DOM 要素にのみクラスを設定し、CSS を個別に処理する必要があります。

(3)$(function(){...}) JavaScript で使用しています。JQuery はこれを使用して、DOM の準備ができたときにスクリプトを起動します。ただし、準備完了イベントは 1 回だけ発生するため、このスクリプトは 1 回だけ実行されます (createTextBox()イベントが発生する前に呼び出されたと仮定します)。この関数内のコードは決して呼び出されません! それがうまくいかない理由です。簡単な解決策:$(function(){...})ラッピングを削除します。

(4) JavaScript タグを DOM に追加しないでください。JavaScript ですので、DOM ツリーをいじる必要はありません。それ以外の

var java_script = "$(function () {" +
     "            var sh = 0;" +
...and so on

単に行う：

var sh = 0;
var sw = 0;
$( "#draggable" + textBoxName ).draggable({
    drag : function(event, ui) {
        var dragposition = ui.position; // <--- missing var keyword
        ...and so on

(5)いくつかの場所でvarキーワードが抜けています。キーワードなしで定義された変数varはグローバルであり、他のすべてのスクリプトから参照できます。これにより、競合が発生する可能性があります。

経験則: 常に常に使用しますvar。グローバル変数を定義する場合は、次のようにします。

window.myVar = 5;

window（ブラウザのトップオブジェクトであることに注意してください）。

于 2013-01-11T14:25:43.750 に答える