Javascript 拖动时将辅助对象置于鼠标下方
我正在尝试实现一些非常接近“可排序的小部件”的功能,尽管我不能使用它,因为其他一些功能不适用于预制作的小部件。 因此,我试图通过可拖动和可拖放的元素重新创建它的功能:Javascript 拖动时将辅助对象置于鼠标下方,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我正在尝试实现一些非常接近“可排序的小部件”的功能,尽管我不能使用它,因为其他一些功能不适用于预制作的小部件。 因此,我试图通过可拖动和可拖放的元素重新创建它的功能: $(".Element").draggable({ helper: 'original', drag: function(event, ui) { ElementWidth = $(this).outerWidth(true); if($(this).prev().length){
$(".Element").draggable({
helper: 'original',
drag: function(event, ui) {
ElementWidth = $(this).outerWidth(true);
if($(this).prev().length){
LeftElementWidth = $(this).prev().outerWidth(true);
LeftElementLeftOffset = $(this).prev().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) < parseFloat(LeftElementLeftOffset+(LeftElementWidth/2))){
$(this).prev().before($(this));
}
}
if($(this).next().length){
RightElementWidth = $(this).next().outerWidth(true);
RightElementLeftOffset = $(this).next().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2)) > parseFloat(RightElementLeftOffset+(RightElementWidth/2))){
$(this).next().after($(this));
}
}
}
});
$("#Container").droppable({ accept: '.Element' });
$(“.Element”).draggable({
助手:'原始',
拖动:函数(事件、ui){
ElementWidth=$(this).outerWidth(true);
if($(this.prev().length){
LeftElementWidth=$(this).prev().outerWidth(true);
LeftElementLeftOffset=$(this).prev().offset().left;
if(parseFloat(ui.offset.left+(ElementWidth/2))parseFloat(righelementleftoffset+(righelementwidth/2))){
$(this).next().after($(this));
}
}
}
});
$(“#容器”).dropable({accept:'.Element'});
它工作正常,只是当我将可拖动辅助对象的元素移动到下一个位置时,它不会停留在鼠标光标下方。
看看这把小提琴:
您将看到在尝试对绿色框进行排序时发生的情况。如何保持助手的位置?
这就是你要找的吗?你可以用击倒吗?我不能添加评论,因为我没有50%的声誉
<a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); }, visible: $data !== viewModel.selectedTask()"></a>
<input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />
你想让div并排出现吗?你说你不想要“可排序小部件”,但你决定使用“可拖动”和“可拖放”元素。。。那么为什么不将“sortable”元素与一些自定义行为一起使用呢?是的,到底是什么阻止你使用可排序小部件?另外,您是否希望能够将这些框垂直移动到红色框之外。你想让他们迅速进入moue up的空白区域吗?
ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).data("sortList", valueAccessor()); //attach meta-data
$(element).sortable({
start: function(event, ui) {
//track the original position of the element
var parent = ui.item.parent();
var prev = ui.item.prev();
//create a function to move it back (if it has a prev sibling, insert after it, otherwise put it at the beginning)
ui.item.moveItemBack = prev.length ? function() { ui.item.insertAfter(prev); } : function() { parent.prepend(ui.item); };
},
update: function(event, ui) {
var item = ui.item.data("sortItem");
if (item) {
//identify parents
var originalParent = ui.item.data("parentList");
var newParent = ui.item.parent().data("sortList");
//figure out its new position
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
//move the element back to its original position and let KO handle adding it to the new parent
if (originalParent !== newParent) {
ui.item.moveItemBack();
}
//place item in the proper position
newParent.remove(item);
newParent.splice(position, 0, item);
}
}
},
connectWith: '.container'
});
}