javascript - 多个（2）拖放JQuery

Question

我有两个拖放区，我希望它们彼此独占。我一直在玩弄这个connectWith论点，但没有成功，希望能得到一些帮助sortable_alpha来连接droppable_alpha和sortable_numbers连接droppable_numbers. 我还需要能够使用该.append功能在放置 div 中添加一个删除按钮，我在第二个块中有代码寻求帮助！

拖动有效但不下降

    $(function () {
      $("#sortable_numbers").sortable();
      $("#sortable_numbers").disableSelection();
      $("#sortable_alpha").sortable();
      $("#sortable_alpha").disableSelection();
      // once this works for numbers repeat this for the letters?
      // create drag and drop where on drop a delete button is added to the list object
      $(".draggable_numbers").draggable();
      $("#droppable_numbers").droppable();
    });

    #droppable_numbers,
    #droppable_alpha {
      border: dashed 1px grey;
      min-height: 100px;
      width:100px;
      float:left;
    }


    #sortable_numbers,
    #sortable_alpha {
    list-style-type: none;
    margin: 0;
    padding-bottom: 2px;
    width: 50px;
    float:left;
    }

    ul {
        list-style: none;
        padding-left: 0;
    }

    li {
      list-style-type: none;
      padding-bottom: 2px;
    }

    #sortable_numbers li, 
    #sortable_alpha li {
    border: 1px solid lightgray;
    }

    #sortable_numbers li:hover,
    #sortable_alpha li:hover {
    cursor: grab;
    }

    #sortable_numbers .ui-sortable-helper:hover, 
    #sortable_alpha .ui-sortable-helper:hover {
    cursor: grabbing;
    background-color: #ddd;
    border-color: black;
    }

    .droppable_numbers,
    .droppable_alpha {
    border: 2px dashed #466683;
    padding: 1em;
    min-height: 200px;
    }

    /*
    Need to change this so that the alpha blocks 
    Only change color when hovered over droppable-alpha
    And droppable-numbers with sortable_numbers
    */
    #droppable_alpha.ui-droppable-hover,
    #droppable_numbers.ui-droppable-hover {
    background: #bad4ed;
    }

    #droppable_numbers select {
    margin: 5px;
    }

    .delete {
      background: none;
      border: 0px;
      color: #888;
      font-size: 15px;
      width: 60px;
      margin: 0px 0 0;
      font-family: Lato, sans-serif;
      cursor: pointer;
      float: right;
      display: inline-block;
    }

    button:hover {
      color: #CF2323;
    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

    <ul id="sortable_alpha">
    <li id="a">A</li>
    <li id="b">B</li>
    <li id="c">C</li>
    </ul>

    <div id="droppable_alpha">Drop Letters</div>
    <div id="droppable_numbers">Drop Numbers</div>

    <ul id="sortable_numbers">
    <li id="1">1</li>
    <li id="2">2</li>
    <li id="3">3</li>
    </ul>

解决问题

$(function () {
  $("#sortable_numbers").sortable();
  $("#sortable_numbers").disableSelection();
  $("#sortable_alpha").sortable();
  $("#sortable_alpha").disableSelection();
  // once this works for numbers repeat this for the letters?
  // create drag and drop where on drop a delete button is added to the list object
  $(".draggable_numbers").draggable();
  $("#droppable_numbers").droppable({
   drop: function (event, ui) {
   // take the id of the dropped block
   // then create a new, unique id
   // then append a delete button to the block
   // inside the drop numbers 
      var draggableId = ui.draggable.attr("id");
      var newid = getNewId(draggableId);
        $(this).append("
        <div>
        <div>
        <div class="form-group drop_area">
        <label class="control-label" for="${newid}">${newid}</label>
        <button class="delete">Delete</button>
        </div>
        </div>
        </div>")
      }
    }
  });
});

#droppable_numbers,
#droppable_alpha {
  border: dashed 1px grey;
  min-height: 100px;
  width:100px;
  float:left;
}


#sortable_numbers,
#sortable_alpha {
list-style-type: none;
margin: 0;
padding-bottom: 2px;
width: 50px;
float:left;
}

ul {
    list-style: none;
    padding-left: 0;
}

li {
  list-style-type: none;
  padding-bottom: 2px;
}

#sortable_numbers li, 
#sortable_alpha li {
border: 1px solid lightgray;
}

#sortable_numbers li:hover,
#sortable_alpha li:hover {
cursor: grab;
}

#sortable_numbers .ui-sortable-helper:hover, 
#sortable_alpha .ui-sortable-helper:hover {
cursor: grabbing;
background-color: #ddd;
border-color: black;
}

.droppable_numbers,
.droppable_alpha {
border: 2px dashed #466683;
padding: 1em;
min-height: 200px;
}

/*
Need to change this so that the alpha blocks 
Only change color when hovered over droppable-alpha
And droppable-numbers with sortable_numbers
*/
#droppable_alpha.ui-droppable-hover,
#droppable_numbers.ui-droppable-hover {
background: #bad4ed;
}

#droppable_numbers select {
margin: 5px;
}

.delete {
  background: none;
  border: 0px;
  color: #888;
  font-size: 15px;
  width: 60px;
  margin: 0px 0 0;
  font-family: Lato, sans-serif;
  cursor: pointer;
  float: right;
  display: inline-block;
}

button:hover {
  color: #CF2323;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<ul id="sortable_alpha">
<li id="a">A</li>
<li id="b">B</li>
<li id="c">C</li>
</ul>

<div id="droppable_alpha">Drop Letters</div>
<div id="droppable_numbers">Drop Numbers</div>

<ul id="sortable_numbers">
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
</ul>

标签： javascriptjquery