这是我第一次在stackoverflow上问一些东西,所以如果我做错了,原谅我我也是新来的
jquery,但通过阅读和教程,我设法创造了一个工作的例子.
下面的代码是我创建的.这样做的意思是我有三个可拖动需求的列表和三个占位符,其中可以放弃要求.想法是,占位符1仅接受列表1中的项目,仅从列表2中的占位符2和列表3中的占位符3.当拖动需求时,占位符将被突出显示,以便用户知道可以将其放在哪里.
所以现在的问题：有没有办法裁剪这个代码？我有这种感觉,这不是最好的方式,它是三次相同的代码,只有两个字正在改变.当我从教程中学到：永远不要写东西两次.
另外一个问题是：当占位符中的要求被删除以创建一条线之间是否可能？我希望用户点击一个占位符并点击其他占位符来绘制连接.我已经看到很多html5画布和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 ",ui ) {
var $this = $(this);
$this.find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
$this.droppable('disable').addClass("highlighted");
}
});
$( ".row3 .placeholder" ).droppable({ //makes row3 .placeholder a droppable area
accept: "#requirements .row3 li ",ui ) {
var $this = $(this);
$this.find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
$this.droppable('disable').addClass("highlighted");
}
});
据说我是jquery的新手,所以很好的解释是值得欢迎的.提前致谢！
抢
解决方法
编写一个返回要重用的对象的函数,插入行类或需要更改的任何参数：
function getSettings(rowClass){
var obj ={ //makes row1 .placeholder a droppable area
accept: "#requirements "+rowClass+" li ",ui ) {
var $this = $(this);
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
$this.droppable('disable').addClass("highlighted");
}
}
return obj;
}
然后调用它就像$(“.row2 .placeholder”).droppable(getSettings(“.row2”)没有测试过,但它应该可以工作,将任何不是静态的部分更改为一个函数参数应该是足够的如果用例是你所描述的.
欢迎来到jQuery！