Javascript jQuery拖拉表有时会重叠或超出范围

我有一个可以对行和列进行排序的网格

我已经准备好了基本功能，但有时拖动列会导致它们重叠

例如，见：

它们不应该在第二排重叠。这种情况不会经常发生，但我希望我的设置更可靠，这样就不会发生这种情况

我尝试将HTML中的

divs

更改为

ul

和

li

，但我遇到了一个不同的错误，现在第二行的列超出了范围：

第三个错误是，如果我将一行拖到屏幕的左上角（超出边界），它最终会移动到网格的末尾

这是我的代码，可以在

html（超薄）

css（sass）

js（咖啡脚本）

div.section
  div#grid
    - 3.times do |i|
      div.grid-row
        - 3.times do |j|
          div.grid-row-item = "#{i}{j}"
div.clearfix

#grid
  width: 1000px
  min-height: 200px
  border: 1px solid darkblue
  padding: 10px
  display: inline-block
  margin: 10px

.grid-row
  float: left
  display: inline-block
  border: 1px solid red
  padding: 5px
  width: 1000px
  min-height: 50px

.grid-row-item
  float: left
  display: inline-block
  min-width: 20px
  height: 50px
  border: 1px solid white
  padding: 4px
  background-color: black
  color: white

.clearfix
  clear: both

$ ->
  window.$grid = $ "#grid"
  window.$grid_rows = $grid.find ".grid-row"
  window.$grid_row_items = $grid.find ".grid-row-item"

  $("#grid").sortable()

  $(".grid-row")
  .draggable
    connectToSortable: $("#grid")
    revert: true
    revertDuration: 0
  .sortable()

  $(".grid-row-item")
  .draggable
    revert: true
    revertDuration: 0
    connectToSortable: $ ".grid-row"