Jquery ui 拖放、可克隆和可移除_Jquery Ui

Jquery ui 拖放、可克隆和可移除

jquery-ui

Jquery ui 拖放、可克隆和可移除,jquery-ui,Jquery Ui,几天前，我刚刚开始使用jQueryUI，允许在我的主页上进行一些拖放和排序。在下面显示的代码中，我想添加“+”和“-”来修正方程“1_2_3=6”，因此必须删除“+”两次才能使方程正确目前，它几乎可以完美工作。我可以添加任意多的“+”和“-”，我可以将它们排序到方程中。唯一的问题是，我不能删除任何“+”或“-” 您能给我一些提示吗，如何通过将这些标志移出可排序窗口来移除它们谢谢你的帮助 <html> <head> <style> #dragg

几天前，我刚刚开始使用jQueryUI，允许在我的主页上进行一些拖放和排序。在下面显示的代码中，我想添加“+”和“-”来修正方程“1_2_3=6”，因此必须删除“+”两次才能使方程正确

目前，它几乎可以完美工作。我可以添加任意多的“+”和“-”，我可以将它们排序到方程中。唯一的问题是，我不能删除任何“+”或“-”

您能给我一些提示吗，如何通过将这些标志移出可排序窗口来移除它们

谢谢你的帮助

<html>
<head>

  <style>


  #draggable { list-style-type: none; margin: 0; padding: 0; }
  #draggable li { display: inline-block; margin: 1%; padding: 1%; font-size: 10vw; text-align:center; min-width:20px; border-style: solid; border-width: medium; border-color:black; background-color:grey;}

  #sortable { float:left; list-style-type: none; width:100%; }
  #sortable li { display: inline-block; margin: 0; padding: 0; font-size: 10vw; text-align:center; min-width:20px;}


  </style>
  <script src="jquery-1.12.4.js"></script>
  <script src="jquery-ui.min.js"></script>
  <script>
  $( function() {

    $( ".clone").draggable({
        cursor:"move",
        revert: "invalid",
        connectToSortable: '#sortable',
        helper: 'clone'
    });

    $( "#sortable").sortable({
      connectWith: "ul",
      cancel: ".ui-state-disabled",
    });


  } );
  </script>
</head>
<body>


<ul id="draggable">
  <li class="clone">+</li>
  <li class="clone">-</li>
</ul>


<ul id="sortable">
  <li class="ui-state-disabled">1</li>
  <li class="ui-state-disabled">2</li>
  <li class="ui-state-disabled">3=6</li>
</ul>



</body>
</html>


#可拖动{列表样式类型：无；边距：0；填充：0；}
#可拖动li{显示：内联块；边距：1%；填充：1%；字体大小：10vw；文本对齐：居中；最小宽度：20px；边框样式：实心；边框宽度：中等；边框颜色：黑色；背景颜色：灰色；}
#可排序{float:left；列表样式类型：none；宽度：100%；}
#可排序li{显示：内联块；边距：0；填充：0；字体大小：10vw；文本对齐：居中；最小宽度：20px；}
$（函数（）{
$（“.clone”）.draggable({
光标：“移动”，
回复：“无效”，
connectToSortable:“#可排序”，
助手：“克隆”
});
$（“#可排序”）。可排序({
连接到：“ul”，
取消：“.ui状态已禁用”，
});
} );

+
-


1
2
3=6

将UI组件拖放到div中时，可以创建一个div。您可以删除拖放的组件

示例代码

//HTML

<div class="removeDiv">
  <p>Drop to remove</p>
</div>

//Style
.removeDiv{
    width:100px;
    height:100px;
    background-color:red;
    margin-top:150px;
  }

//Script
$('.removeDiv').droppable({
    over: function(event, ui) {
        ui.draggable.remove();
    }
});

//HTML
除去
//风格
removeDiv先生{
宽度：100px；
高度：100px；
背景色：红色；
边缘顶部：150px；
}
//剧本
$（'.removeDiv'）。可拖放({
结束：功能（事件、用户界面）{
ui.draggable.remove（）；
}
});

这会让你的工作完成。

下面是上面代码的提琴

继续我的评论。您的代码可能如下所示

$（函数（）{
$（“.clone”）.draggable({
光标：“移动”，
回复：“无效”，
connectToSortable:“#可排序”，
助手：“克隆”
});
$（“#可排序”）。可排序({
连接到：“ul”，
取消：“.ui状态已禁用”，
});
$（“.trash”）.可拖放({
接受：“#可排序>li”，
课程：{
“ui可拖放悬停”：“ui状态突出显示”
},
drop：函数（事件、用户界面）{
删除项（ui.Dragable）；
}
});
函数deleteItem（$o）{
$o.淡出（）.删除（）；
}
});
#可拖动{
列表样式类型：无；
保证金：0；
填充：0；
}
#可拖动的李{
显示：内联块；
利润率：1%；
填充：1%；
字体大小：10vw；
文本对齐：居中；
最小宽度：20px；
边框样式：实心；
边框宽度：中等；
边框颜色：黑色；
背景颜色：灰色；
}
#可恶的{
列表样式类型：无；
宽度：100%；
}
#可悲的李{
显示：内联块；
保证金：0；
填充：0；
字体大小：10vw；
文本对齐：居中；
最小宽度：20px；
}
.垃圾{
宽度：50px；
高度：50px；
边框：1px实心#000；
边界半径：6px；
}


+
-


1
2
3=6

非常感谢。但是，有没有一种方法可以在没有额外的“垃圾”div的情况下执行此操作，以便在将其放回其他标志或显示器上的其他位置时将其删除？是的，您可以执行此操作。我的目的是向您展示一些有效的东西。欢迎来到Stack Overflow。请考虑下面的演示：它使用一个“垃圾”的下落区域，当你想要删除某件东西时，你把它拖到垃圾桶里。你也可以这样做。