Jquery 可拖放功能

比如说，我左手边有一些名为1-4区的可放下div

<div id="zone1"></div>
<div id="zone2"></div>
<div id="zone3"></div>
<div id="zone4"></div>

还有我右手边的一些拖拉物品

<div id="drag1">Apple</div>
<div id="drag2">Banana</div>
<div id="drag3">Kiwi</div>
<div id="drag4">Orange</div>

苹果公司 香蕉 几维鸟 橙色 我知道我可以将这些设置为可拖放，如下所示：

for (var i=1;i<=4;i++)
{
   var x = "zone" + i;
   $(x).droppable();
}
  for (var i=1;i<=4;i++)
{
   var x = "drag" + i;
   $(x).draggable();
}

for（var i=1；i来自

您可以使用
可拖放
交互的
拖放
事件。在此事件处理程序中
$（此）
指向可拖放元素，其中as ui.draggable指向可拖放元素

for (var i=1;i<=4;i++)
{
   var x = "zone" + i;
   $(x).droppable({
      drop: function(){
          //This will alert the id of container in which fruit is dropped
          alert($(this).attr('id'));

          //This will alert the id of fruit container which is dragged
          alert($(ui.draggable).attr('id'));
      }
   });
}
  for (var i=1;i<=4;i++)
{
   var x = "drag" + i;
   $(x).draggable();
}

for（var i=1；i我建议您这样做，而不是您所拥有的

<div id="zone1" class="droppable"></div>
<div id="zone2" class="droppable"></div>
<div id="zone3" class="droppable"></div>
<div id="zone4" class="droppable"></div>

<div id="drag1" class="draggable">Apple</div>
<div id="drag2" class="draggable">Banana</div>
<div id="drag3" class="draggable">Kiwi</div>
<div id="drag4" class="draggable">Orange</div>

希望有帮助！

<style>
.zones>div{ border:solid 1px gray; background-color:yellow; padding:20px;margin:5px;}
</style>

<div class="zones">
    <div id="zone1"></div>
    <div id="zone2"></div>
    <div id="zone3"></div>
    <div id="zone4"></div>
</div>


<div id="drag1" fruitid="1">Apple</div>
<div id="drag2" fruitid="2">Banana</div>
<div id="drag3" fruitid="3">Kiwi</div>
<div id="drag4" fruitid="4">Orange</div>

<script>

$("div[id*='zone']").droppable({
            accept: "div[id*='drag']",
            drop: function( event, ui ) {
                alert( ui.draggable.text() + " with fruitid = "+ ui.draggable.attr("fruitid")+" added to " + $(this).attr("id"));
                  $( "<div/>" ).text( ui.draggable.text()).appendTo( this );
            }
        })
$('div[id*="drag"]').draggable({helper: "clone"});

</script>

.zones>div{边框：纯色1px灰色；背景色：黄色；填充：20px；边距：5px；}
苹果
香蕉
几维鸟
橙色
$（“div[id*='zone']）。可拖放({
接受：“div[id*='drag']”，
drop：函数（事件、用户界面）{
警报（ui.draggable.text（）+，其中在“+$（this.attr（“id”）中添加了水果id=“+ui.draggable.attr（“水果id”）+”）；
$（“”）.text（ui.draggable.text（））.appendTo（this）；
}
})
$（'div[id*=“drag”]'）。可拖动（{helper:“clone”}）；
谢谢，我会尝试一下。但我遇到了一个问题，我的div不可拖放。我检查了类，没有可拖放的ui。实际上，我的div被称为var x=“#l”+currLay+“zone”+i；其中currLay和i是整数。我做错了什么吗？您可以创建自己的属性，如果ID？？这就是为什么“x”在“xhtml”中表示：）@MelihOKURSOY，这是无效的XHTML。如果您指定了自定义名称空间并命名了属性，那么它将是有效的。如果它是HTML5，您可以在属性前面加上
数据-
，它将是有效的。
数据-
属性是更好的选择，因为jQuery的
.data（）
函数将拉取
[data-]
属性值。您对任何解决方案都满意吗？请确保将一个解决方案标记为答案。
var fruit_id = '';
var dropbox_id = '';
$( '.draggable' ).draggable();
$( '.droppable' ).droppable({
               drop: function( event, ui ) {
            fruit_id = $(ui.draggable).attr('id');
                            dropbox_id = $( this ).attr('id');
                            /* DO SOMETHING HERE */
        }
});
/* Or do something here! */

<style>
.zones>div{ border:solid 1px gray; background-color:yellow; padding:20px;margin:5px;}
</style>

<div class="zones">
    <div id="zone1"></div>
    <div id="zone2"></div>
    <div id="zone3"></div>
    <div id="zone4"></div>
</div>


<div id="drag1" fruitid="1">Apple</div>
<div id="drag2" fruitid="2">Banana</div>
<div id="drag3" fruitid="3">Kiwi</div>
<div id="drag4" fruitid="4">Orange</div>

<script>

$("div[id*='zone']").droppable({
            accept: "div[id*='drag']",
            drop: function( event, ui ) {
                alert( ui.draggable.text() + " with fruitid = "+ ui.draggable.attr("fruitid")+" added to " + $(this).attr("id"));
                  $( "<div/>" ).text( ui.draggable.text()).appendTo( this );
            }
        })
$('div[id*="drag"]').draggable({helper: "clone"});

</script>