0

我有一个向表单添加可拖动元素的脚本。

这真的很好，直到我添加另一个 - 加上它的脚本 - 然后前一个就停止响应。这两个脚本都存在于 DOM 中。

为什么第一个停了？

我努力了

$.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 中使用。当 DOM 准备好时，JQuery 使用它来触发脚本。但是由于 ready 事件只触发一次，所以这个脚本只执行一次（假设createTextBox()在事件触发之前被调用）。这个函数里面的代码永远不会被调用！这就是为什么它不起作用。简单的解决方案：去除$(function(){...})包装。

(4)不要在 DOM 中添加 JavaScript 标签。它是 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 回答