小编use*_*008的帖子

这是我第一次在stackoverflow上问一些东西,请原谅我,如果我做错了什么.我也是jquery的新手,但通过阅读和教程,我设法创建了一个工作示例.

下面的代码是我创建的.这意味着我有三个具有可拖动要求的列表和三个可以删除要求的占位符.我们的想法是占位符1仅接受列表1中的项目,仅占用列表2中的占位符2和列表3中的占位符3.当拖动需求时,占位符将突出显示,以便用户知道可以将其删除的位置.

现在问题是:有没有办法裁剪这段代码？我觉得这不是最好的方式,它是三次相同的代码只有两个字正在改变.正如我从教程中学到的:永远不要写两次.

还有一个问题:是否有可能在占位符中删除需求以在它之间创建一条线？我希望用户单击一个占位符并单击另一个占位符以绘制连接.我已经看过很多关于html5 canvas和jsPlumb的例子,但我不需要所有这些功能.单击时占位符之间只有一行.

$(function() {
    $( "#requirements" ).accordion();
    $( "#requirements ul li" ).draggable({ 
    appendTo: "body", 
    helper: "clone" 
});

$( ".row1 .placeholder" ).droppable({ //makes row1 .placeholder a droppable area
     accept: "#requirements .row1 li ", 
     activeClass: "ui-state-hover",
     drop: function( event, ui ) {
        var $this = $(this);
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        $this.droppable('disable').addClass("highlighted");
     }
});

$( ".row2 .placeholder" ).droppable({ //makes row2 .placeholder a droppable area
     accept: "#requirements .row2 li ", 
     activeClass: "ui-state-hover",
     drop: function( event, ui ) { …