[英]keep helper under mouse when dragging
I'm trying to implement something very close to what the 'Sortable Widget' would do, though I can't use it because of other things that doesn't work with the premade widget. 我正在尝试实现一些非常接近'Sortable Widget'的东西,尽管由于其他与premade widget不兼容的东西我无法使用它。 So I'm trying to recreate it's functionality with draggable and droppable elements:
所以我试图用draggable和droppable元素重新创建它的功能:
$(".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' });
It works fine, except for that the draggable-helper doesn't stay underneath the mouse-cursor when I move it's element to the next position. 它运行正常,除了当我将它的元素移动到下一个位置时,draggable-helper不会停留在鼠标光标下面。 Check out this fiddle:
看看这个小提琴:
http://jsfiddle.net/5qFhg/15/ http://jsfiddle.net/5qFhg/15/
You'll see what happens when you try to sort the green boxes. 您将看到当您尝试对绿色框进行排序时会发生什么。 How can I keep the helper in position?
如何将助手保持在适当位置?
http://jsfiddle.net/margaret_/XM6f8/1/ http://jsfiddle.net/margaret_/XM6f8/1/
Is this what you are looking for? 这是你想要的? Are you okay with using knockout?
你还可以使用淘汰赛吗? I can't add comments 'cause I don't have 50 reputation.
我无法添加评论,因为我没有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(''); } }" />
Use parent and previous location to mimic the function. 使用父级和上一个位置来模拟该功能。
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'
});
}
Do you want the divs to appear side by side? 你想让divs并排出现吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.