Javascript 拖放问题jquery

我有下面的代码使用的脚本，我使东西拖拽和拖放。目前，我有两个可拖动的内容，两个地方可以删除，如果正确的话，那么系统将更改并说正确，我想知道是否有一个地方，我可以创建HTML div，代码运行并匹配可拖动到可拖动的内容。我有一些人有非技术背景，有基本的HTML知识，所以现在你如何添加div和删除它们，但他们能够处理脚本，我想知道，如果我的可拖动内容ID为1-10，可拖放内容ID为1-10，那么ID 1可拖放只能添加到ID 1可拖放

<meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="hhtps:/resources/demos/style.css">
  <style>
  #droppable,#droppable2 { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  </style>
  <script>
  $(function() {
    $( "#draggable, #draggable2" ).draggable();


    $( "#droppable" ).droppable({
      accept: "#draggable",
      drop: function( event, ui ) {
        $( this )
          .removeClass("ui-widget-header")
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      },
      out: function( event, ui ) {
        $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
          .find( "p" )
            .html( "accept" );
      }
    });

  $( "#droppable2" ).droppable({
      accept: "#draggable2",
      drop: function( event, ui ) {
        $( this )
          .removeClass("ui-widget-header")
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      },
      out: function( event, ui ) {
        $( this ).removeClass( "ui-state-highlight" ).addClass( "ui-widget-header" )
          .find( "p" )
            .html( "accept" );
      }
    });

  });
  </script>

<div id="draggable2" class="ui-widget-content">
  <p>I'm draggable but can't be dropped</p>
</div>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>accept: '#draggable'</p>
</div>

<div id="droppable2" class="ui-widget-header">
  <p>accept: '#draggable2'</p>
</div>

#可拖放，#可拖放2{宽度：150px；高度：150px；填充：0.5em；浮点：左；边距：10px；}
#可拖动，#可拖动2{宽度：100px；高度：100px；填充：0.5em；浮动：左侧；边距：10px 10px 10px 0；}
$（函数（）{
$（“#可拖动，#可拖动2”）.draggable（）；
$（“#可拖放”）。可拖放({
接受：“可拖动”，
drop：函数（事件、用户界面）{
$（本）
.removeClass（“ui小部件头”）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
},
输出：功能（事件、用户界面）{
$（this）.removeClass（“ui状态突出显示”）.addClass（“ui小部件头”）
.查找（“p”）
.html（“接受”）；
}
});
$（“#可拖放2”）。可拖放({
接受：“draggable2”，
drop：函数（事件、用户界面）{
$（本）
.removeClass（“ui小部件头”）
.addClass（“ui状态突出显示”）
.查找（“p”）
.html（“已删除！”）；
},
输出：功能（事件、用户界面）{
$（this）.removeClass（“ui状态突出显示”）.addClass（“ui小部件头”）
.查找（“p”）
.html（“接受”）；
}
});
});
我是拖拉的，但不能掉下

把我拖到我的目标

接受：“#可拖动”

接受：“#可拖动2”

如果我正确理解您的问题，您希望每个draggable都是可拖放的，只有它的dropable，而没有其他dropable div

通过在代码中为每个可拖放的

添加
accept:“#draggable”
，您已经实现了这一点

您可以添加这一额外的代码行，这样，如果您的Dragable被丢弃在其Dropable之外的任何地方，它将返回其Dropable。
$（“#可拖动，#可拖动2”）.draggable（{revert:“invalid”}）

如果将相同的类（如
class=draggables
添加到每个可拖动的html元素中，然后可以使用
$（“.draggables”）.draggable（{revert:“invalid”}）；
来标记它们

下面是示例。
您需要避免为此使用HTML
id
，并开始使用类

您的HTML：

<div id="draggable_2" class="ui-widget-content draggable-item">
    <p>draggable_2</p>
</div>
<div id="draggable" class="ui-widget-content draggable-item">
    <p>draggable</p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_2">
    <p></p>
</div>
<div class="ui-widget-header droppable-item" data-accept="#draggable_3">
    <p></p>
</div>

你说的“创建div并将draggable匹配到dropable”是什么意思？我不明白你想要实现什么。
$(function () {
    $(".draggable-item").draggable();

    $('.droppable-item').each(function (i, ele) {
        // Gets the accepted from the HTML property "data-accept"
        var accept = $(this).data('accept');

        // This is just to show what the item accepts. you can remove it.
        $(this).find('p').text('accepts: ' + accept);

        // Init the jQuery UI droppable()
        $(this).droppable({
            accept: accept,
            drop: function (event, ui) {
                $(this)
                    .removeClass("ui-widget-header")
                    .addClass("ui-state-highlight")
                    .find("p")
                    .html("Dropped!");
            },
            out: function (event, ui) {
                $(this).removeClass("ui-state-highlight").addClass("ui-widget-header")
                    .find("p")
                .html("accept: " + accept);
            }
        });
    });
});