Javascript Jquery可排序：克隆+；附加到多个可能的目标

我正在做一个计划，在这一边你有一个任务列表，分为3类。此列表中的任何项目都需要能够被克隆并附加到一周7天中的一天或多天中

因此，将它拖到任何一天，都需要克隆它并在拖到的那天显示它。到目前为止，我还没有找到一种方法来表明该项可以通过sort10附加到sort4。有没有一种方法可以确定您悬停的目标是什么，从而在appendTo（）中填充一个变量

我当前的代码只允许将项目克隆到7列中的一列

我的代码：

Function sortable(){

        // the 3 categories of which each item needs to be cloned

        $( "#sort1, #sort2, #sort3" ).sortable({
            connectWith: ".connectedSortable",
            remove: function(event, ui) {
                ui.item.clone().appendTo('#sort4');
                $(this).sortable('cancel');
            }
        }).disableSelection();


        // on each day, you can drag and drop to any other 
           day which needs to move the task

        $( "#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    };

我确实设法找到了一个解决问题的有效方法，但我不确定这是最有效的方法。根据光标的位置，我可以决定选择器，这样就可以按照我需要的方式对其进行排序

    function sortable() {
        $("#sort1, #sort2, #sort3").sortable({
            connectWith: ".connectedSortable",
            remove: function (event, ui) {
                let pos;
                let scroll = document.querySelector('.week_planner--container').scrollLeft;
                let cursor = (event.pageX - $('.week_planner--container').offset().left) + scroll;
                if (cursor >= 0 && cursor <= 170) {
                    pos = '#sort4';
                } else if (cursor >= 171 && cursor <= 340) {
                    pos = '#sort5';
                } else if (cursor >= 341 && cursor <= 510) {
                    pos = '#sort6';
                } else if (cursor >= 511 && cursor <= 680) {
                    pos = '#sort7';
                } else if (cursor >= 681 && cursor <= 850) {
                    pos = '#sort8';
                } else if (cursor >= 851 && cursor <= 1020) {
                    pos = '#sort9';
                } else if (cursor >= 1021 && cursor <= 1190) {
                    pos = '#sort10';
                }

                ui.item.clone().appendTo(pos);
                $(this).sortable('cancel');
            }
        }).disableSelection();

        $("#sort4, #sort5, #sort6, #sort7, #sort8, #sort9, #sort10").sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();
    };

函数可排序（）{
$（“#sort1，#sort2，#sort3”）。可排序({
connectWith:“.connectedSortable”，
删除：函数（事件、用户界面）{
让pos；
let scroll=document.querySelector（'.week\u planner--container'）。向左滚动；
让光标=（event.pageX-$（'.week\u planner--container'）.offset（）.left）+滚动；
如果（cursor>=0&&cursor=171&&cursor=341&&cursor=511&&cursor=681&&cursor=851&&cursor=1021&&cursorjQuery的sortable提供了一些事件，您可以点击这些事件。我存储了要拖动的列表及其位置，以便确定拖动后是否应该克隆


$（函数（）
{
var$movingFrom=null；
var指数=零；
$（“.connectedSortable”）.sortable(
{
connectWith:“.connectedSortable”，
开始：功能（事件、用户界面）
{
//记录要从中拖动的列表以及项目当前所在的列表中的位置。
$movingFrom=ui.item.parent（）；
index=ui.item.index（）；
},
receive:function（event，ui）//当我们完成拖动并移动对象时，会调用该函数。
{
如果（event.target.id==“sortable1”）
{
//防止第一个列表从其他地方接收项目
ui.sender.sortable（“取消”）；
}
其他的
{
if（$movingFrom.attr（“id”）=“sortable1”）
{
//如果我们从第一个列表中移动。。。
var$insertBefore=$（“#可排序1 li”）.get（索引）；
if（$insertBefore！==未定义）
{
//克隆原始第一个列表项
ui.item.clone（）.insertBefore（$insertBefore）；
}
其他的
{
//一定是从名单的末尾来的。。。
$（“#sortable1”）.append（ui.item.clone（））；
}
}
}
}
}).disableSelection（）；
})；
#可排序1，
#可排序2，
#可排序的3{
列表样式类型：无；
保证金：0；
填充：0；
浮动：左；
右边距：10px；
}
#可悲的1李，
#可悲的2李，
#可排序的3李
{
字体系列：Calibri；
边框：实心1px黑色；
背景色：白色；
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
光标：指针；
}


第1项
第2项
第3项
第4项
第5项


第1项
第2项
第3项
第4项
第5项


第1项
第2项
第3项
第4项
第5项

jQuery的sortable提供了一些事件，您可以点击这些事件。我存储了要从中拖动的列表及其位置，以便确定拖动后是否应该克隆


$（函数（）
{
var$movingFrom=null；
var指数=零；
$（“.connectedSortable”）.sortable(
{
connectWith:“.connectedSortable”，
开始：功能（事件、用户界面）
{
//记录要从中拖动的列表以及项目当前所在的列表中的位置。
$movingFrom=ui.item.parent（）；
index=ui.item.index（）；
},
receive:function（event，ui）//当我们完成拖动并移动对象时，会调用该函数。
{
如果（event.target.id==“sortable1”）
{
//防止第一个列表从其他地方接收项目
ui.sender.sortable（“取消”）；
}
其他的
{
if（$movingFrom.attr（“id”）=“sortable1”）
{
//如果我们从第一个列表中移动。。。
var$insertBefore=$（“#可排序1 li”）.get（索引）；
if（$insertBefore！==未定义）
{
//克隆原始第一个列表项
ui.item.clone（）.insertBefore（$insertBefore）；
}
其他的
{
//一定是从名单的末尾来的。。。
$（“#sortable1”）.append（ui.item.clone（））；
}
}
}
}
}).disableSelection（）；
})；
#可排序1，
#可排序2，
#可排序的3{
列表样式类型：无；
保证金：0；
填充：0；
浮动：左；
右边距：10px；
}
#可悲的1李，
#可悲的2李，
#可排序的3李
{
字体系列：Calibri；
边框：实心1px黑色；
背景色：白色；
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
光标：指针；
}


第1项
第2项