Javascript 如何使用jquery创建拖放函数

我在使用jquery拖放div时遇到一些问题。目前我有以下jquery代码：

<script>
                $(document).ready(function() { 
                    $('#coursesList').click(function() {
                        $('#dragCourseFromArea').hide(); 
                        $('#dragCourse').fadeIn(1100);              
                            var selectedValue = $(this).val();
                            $('#dragCourse').text(selectedValue);


                    }); 

                    $('#dragCourse').draggable({ revert: true });
                    $('#calendarDay').droppable({ 
                tolerance: 'touch',
                            accept: '#dragCourse',
                            activeClass: 'ui-state-hover',
                              hoverClass: 'ui-state-active',
                              drop: function( event, ui ) {
                                $( this )
                                  .addClass( 'ui-state-highlight' )
                                  .find('td')
                                    .html( 'Dropped!' );
                        }
                    });
                });             
                </script>

$（文档）.ready（函数（）{
$（“#课程列表”）。单击（函数（）{
$（“#dragCourseFromArea”）.hide（）；
$（'dragCourse'）。fadeIn（1100）；
var selectedValue=$（this.val（）；
$（'#dragCourse'）。文本（selectedValue）；
}); 
$（'#dragCourse'）.draggable（{revert:true}）；
$（'#calendarDay'）。可拖放（{
宽容：“触摸”，
接受：“#dragCourse”，
activeClass:“ui状态悬停”，
hoverClass:“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
$（本）
.addClass（'ui状态突出显示'）
.find（'td'））
.html（'Dropped！'）；
}
});
});             

我不确定这是否是问题所在。有关的3个要素是：

<div id='dragCourseFromArea'>Drag new courses from this box to allocate</div>
<div id='dragCourse' class='ui-widget-content'></div>

<td id='calendarDay' style='background-color: #E4E4EE;' onMouseOver='this.style.backgroundColor=\"#cccccc\"' onMouseOut='this.style.backgroundColor=\"#E4E4EE\"' class='ui-widget-header'> {$monthday}</td>

从此框中拖动新课程以分配
{$monthday}

我不完全确定我是否做对了，但是“dragcourse”div应该在“calendarDay”上拖放，这是一个表格单元格（td）。但无论我做了什么改变，我似乎都无法让它发挥作用。对这里可能出现的问题有什么建议吗

---

提前感谢

主要问题是您不能在页面中重复ID，根据定义，ID是唯一的。我更新了你的演示，在每个相同的ID中添加class

calandarDay

然后将

droppable

应用于该类，直到将html更改为

droppable

请注意，drop回调中的
“this”
是
，因此我注释掉了
find（'td'）

在jsfiddle.net中创建一个演示，使用您现在拥有的，并解释需要发生的事情。我不知道为什么jquery不会在这里运行，但是您可以看到代码。需要做的是，元素/div“dragcourse”应该能够被拖到td（单元格）“calendarDay”上，它应该再次执行一个操作。jQUery不起作用的原因是您没有将它包括在FiddleGreat左上角的
框架
选择中！现在这样做了，我有另一个问题：当拖放对象被丢弃时，是否有可能从拖放对象中获取一个值？例如，从td中的输入=隐藏字段中获取值？同样，当发生这种情况时，调用另一个函数，其中来自draggable（名称）和dropable（隐藏字段）的值被传递给。我希望这不是一个太宽泛的问题。非常感谢你的帮助！你当然可以。检查登录到控制台的
ui
对象。将看到大量属性，包括如何连接删除的元素。使用可拖动文档中的其他事件初始化所需的数据。查看'jQuery.data（），而不是隐藏字段我查看了它并将我的jQuery中的一些更改为：drop:function（event，ui）{console.log（ui）var ts=$（'.calendarDayTimestamp'）.data（'options'）.timestamp；$（this.addClass（'ui state highlight'）.append（ts+'
'））你认为这里有什么不对劲的地方还是另一个地方？当我把它放到td单元上时，它只会写相同的值，不管它在哪里……你不能像那样引用整个
calendarDay
类，你需要一个特定的类。啊，是的……我知道了，不确定你添加了什么新类……但是如果
数据-
属性在td上，那么可以从
这个
中访问