Question

我手上有一个简单的问题，但似乎无法解决它。

这是：

HTML

<html>

 <label>Rows:</label>
<input Id="linhas" class="span3" style="margin: 0pt auto;" type="text" placeholder="Number of rows..." data-provide="typeahead" data-items="1" 
       onFocus="clearField()"/>

  <label>Columns:</label>
<input Id="colunas" class="span3" style="margin: 0pt auto;" type="text" placeholder="Number of columns..." data-provide="typeahead" data-items="1" 
       onFocus="clearField()"/>
  <p></p>
<div class="form-actions" "span3">
<input name="submit" type="submit" class="btn" value="Draw" onClick="draws(linhas.value,colunas.value)"  
/>

  <div class="inputs">
            <div>1</div>
            <div>2</div>
            <div>3</div>    
            <div>4</div>
            <div>5</div>
            <div>6</div>

    </div>


<table id="tablePrint" class="spaces"></table>

</html>

CSS

.block {
        z-index:9999;
        cursor:move;
    }

    .productCode {

    }

    li {
        list-style:none;
    }
    tr {
        border: 2px solid black;
    }
    table {
        border: 2px solid black;
    }

    .inputs div {
        float:left;
        background-color:#FFFFFF;
        color:#004E66;
        font-size:x-large;
        margin:2px;
        padding:20px;
        border:1px solid black;
    }

    .spaces td {
        background-color:#666666;
        margin:2px;
        width:184px;
        height: 99px;
        border:2px solid black;
}

的JavaScript

function draws(nRows, nCols) {
  var aux = "";
  var myTable = "";
  myTable += " <table class=\"spaces\">";
  myTable += "";
  var colStructure = "";
  //var nRows = 5;
  //var nCols = 5;

  for (var i = 0; i < nCols; i++) {
    colStructure += "<td></td>";
  }

  for (var j = 0; j < nRows; j++) {
    aux = aux.concat("<tr>", colStructure, "</tr>");
  }
  myTable = myTable.concat(aux);
  myTable += "";
  myTable += " </table>";
  document.getElementById('tablePrint').innerHTML = myTable;
}

function clearField() {
  draws(0, 0);
}

$(document).ready(function() {

      $(".inputs div").draggable({
        opacity: .45,
        create: function() {
          $(this).data('position', $(this).position())
        },
        cursorAt: {
          left: 15
        },
        cursor: 'move',
        start: function() {
          $(this).stop(true, true)
        }
      });

      $(myTable).find('td').droppable({
        drop: function(event, ui) {
          var $this = $(this);
          $(".highlight").removeClass("highlight");
          $this.addClass("highlight");
          ui.draggable.position({
            my: "center",
            at: "center",
            of: $this,
            using: function(pos) {
              $(this).animate(pos, "slow", "linear");
            }
          })
        }
      })

    }

我让用户生成一个带有draggable属性的元素矩阵（这意味着我可以将元素拖入其中）并且我希望将这些元素拖动到矩阵单元格的中心。

如果我在HTML中使用“硬编码”矩阵，一切正常，因为我可以通过JS引用它，一切正常。

See here

但是，在更具交互性的版本中，我能够拖动元素，但是居中部分停止工作，可能是因为我（以某种方式）丢失了对HTML端表属性的直接访问...见这里：

我该如何解决这个问题？

提前感谢您，如果您需要一些许可，请告诉我，

布鲁诺

Answer 1

简单的答案是只将整个脚本更改为表创建源：

<强>的JavaScript

function draws(nRows, nCols) {
  var aux = "";
  var myTable = "";
  myTable += " <table class=\"spaces\">";
  myTable += "";
  var colStructure = "";
  //var nRows = 5;
  //var nCols = 5;

  for (var i = 0; i < nCols; i++) {
    colStructure += "<td></td>";
  }

  for (var j = 0; j < nRows; j++) {
    aux = aux.concat("<tr>", colStructure, "</tr>");
  }
  myTable = myTable.concat(aux);
  myTable += "";
  myTable += " </table>";
  document.getElementById('tablePrint').innerHTML = myTable;

  $(document).ready(function() {

      $(".inputs div").draggable({
        opacity: .4,
        create: function() {
          $(this).data('position', $(this).position())
        },
        cursorAt: {
          left: 15
        },
        cursor: 'move',
        start: function() {
          $(this).stop(true, true)
        }
      });
      $('.spaces').find('td').droppable({
        drop: function(event, ui) {
          snapToMiddle(ui.draggable, $(this));
        }
      });

      function snapToMiddle(dragger, target) {
        var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
        var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
        dragger.animate({
          top: topMove,
          left: leftMove
        }, {
          duration: 600,
          easing: 'easeOutBack'
        });
      }
    })

}

function clearField() {
  draws(0, 0);
}

将可拖动元素置于用户生成的droppable矩阵中

1 个答案: