I want to disable sorting of items when item is dragged. Only after the drop has been completed the items must sort accordingly.
$( "#sortable" ).sortable({
tolerance: 'pointer',
revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'parent',
cursor: 'move',
distance: 5,
opacity: 0.3,
});
link:jsfiddle
One way to do it would be to micromanage placeholder position during the different events. It causes a problem with revert, but there's probably a way to resolve this somehow. And the behavior might not be exactly exactly the same, but again, a little tweak and it could be there. Anyway, my suggestion:
$(function () {
$("#sortable").sortable({
tolerance: 'pointer',
//revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'window',
cursor: 'move',
distance: 5,
opacity: 1,
start: function (event, ui) {
place_prev = ui.placeholder.prev();//get position when selecting item
},
change: function (event, ui) {
place_pos = ui.placeholder.index(); //each change you gather where the placeholder is going
place_prev.after(ui.placeholder);//then you place it back where it started
},
beforeStop: function (event, ui) {
$('li').eq(place_pos).after(ui.item);//before stopping you place item where it was on last change event
},
});
});
http://jsfiddle.net/2mxw14vv/3/
Related
I want to disable sorting of items when item is dragged. Only after the drop has been completed the items must sort accordingly.
Thanks,
Vimalraj Theerkatharisi
$(function() {
$( "#sortable" ).sortable({
tolerance: 'pointer',
revert: 'invalid',
forceHelperSize: true,
scroll: true,
forcePlaceholderSize: true,
placeholder: 'ui-state-highlight',
helper: 'clone',
containment: 'parent',
cursor: 'move',
distance: 5,
opacity: 0.3,
});
});
jsfiddle
here's a jsfiddle of what I'm trying to do
http://jsfiddle.net/YSBGu/
$( ".dragcomp" ).draggable({
cursorAt: {
left: 0
},
zIndex: 300,
revert: "invalid",
helper: "clone",
distance: 10
});
You'll notice that when trying to drag the divs in the left column to the middle section it stays trapped in the left one and just scrolls it. Is someone able to help me solve this issue?
You can specify the appendTo option to reparent the helper element under an ancestor of your pane structure (for instance the <body> element itself):
$(".dragcomp").draggable({
appendTo: "body",
cursorAt: {
left: 0
},
zIndex: 300,
revert: "invalid",
helper: "clone",
distance: 10
});
You will find an updated fiddle here.
I have multiple DropZone defined, each dropZone need to keep at least one draggable object.
When the user try to move the last item from a dropZone, I need to warn the user, that the last item cannot be moved and cancel the move action. I read that the ui.render was accessible on the receive event, although it's always empty.
I would need to access the original draggable parent (the dropZone it come from) and calculate the count of draggable children. When the count is now 0, I would cancel the move action so that the dragged block return to it's original position.
Something like:
function SortableReceiveDrag(event, ui) {
if ($(ui.sender).find("div.dragableBlock").length <= 0) {
$(ui.sender).sortable('cancel');
}
}
And my binding is as following:
var templateContent = $("#templatectn");
contentDropZones = templateContent.find('div.ContentZone.dropZone');
contentDropZones.sortable({
accept: 'div.dragableBlock',
connectWith: 'div.ContentZone.dropZone',
appendTo: "parent",
axis: false,
containment: 'document',
cursor: 'move',
cursorAt: false,
dropOnEmpty: true,
forceHelperSize: true,
forcePlaceholderSize: true,
iframeFix: true,
items: 'div.dragableBlock',
greedy: true,
grid: false,
helper: "clone",
opacity: 0.45,
placeholder: 'ui-block-placeholder',
revert: false,
scroll: true,
scrollSensitivity: 20,
scrollSpeed: 20,
scope: "default",
tolerance: "pointer",
zIndex: 2700,
start: function (event, ui) { SortableStartDrag(event, ui); },
stop: function (event, ui) { SortableStopDrag(event, ui); },
receive: function (event, ui) { SortableReceiveDrag(event, ui); },
change: SortableChange
});
contentDropZones.disableSelection();
Any idea why this doesn't work?
Thanks,
Francois
I have two jQuery UI dialogs which are basically the same. They have the same positions. The problem is that they are displayed in the wrong positions in the browser, not 200 &200 from top & left of the viewport, plus they are not on top of each other.
The x position seems correct but not their y values.
What am I missing?
See JSFiddle example here
Addition:
<script type="text/javascript">
$(document).ready(function()
{
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
});
// $( "#two" ).dialog({
// closeOnEscape: false,
// open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }, position: [200,200]
// });
});
</script>
</head>
<body>
<div id="one" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ddd">Hello</div>
<div id="two" style="height: 100px;width: 100px;border: 1px solid red;background-color: #ccc">Hello 2</div>
</body>
It has to do with the position: relative that uid dialog sets.
http://jsfiddle.net/bJEgR/1/
Since I've not worked with this particular plugin before, I'm not sure if this is a good idea or not, but as a proof of concept, it shows that it is the position: relative setting. I used to Firebug to inspect the css.
$( "#one" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
$( "#two" ).dialog({
closeOnEscape: false,
open: function(event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(".ui-dialog").css('position','absolute');
$(".ui-dialog").css('top','100px');
$(".ui-dialog").css('left','100px');
},
position: [200,200]
});
Wrapping the dialogs with a div which has a declared height seems to fix it. I don't know if this is a bug.
I am using this http://jqueryui.com/demos/droppable/
But I have a problem dragging to a droppable that is smaller than the draggable.
It will not drop on the droppable, but on the top left of the droppable.
(source: yart.com.au)
Is there any way around this?
Here is the code, thanks.
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
$(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail");
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
$('.imageContainer').droppable({
accept: '.draggable',
drop: function(event, ui) {
ui.draggable.css({
"position": "relative",
"left": "0px",
"top": "0px"
});
if ($(this).children().length == 0) {
// ui.draggable.addClass("thumbnail");
$(ui.draggable).appendTo(this);
$(this).removeClass("border");
}
},
over: function(event, ui) {
ui.draggable.removeClass("enlarge");
ui.draggable.addClass("thumbnail");
$(this).addClass("border");
},
out: function(event, ui) {
// ui.draggable.removeClass("zoomIn")
$(this).removeClass("border");
},
tolerance: 'intersect'
});
CSS:
.thumbnail {
height:60px;
margin-right:10px;
width:80px;
z-index:1;
}
.enlarge {
border:5px solid white;
height:145px;
width:195px;
}
$('.draggable').draggable({
revert: 'invalid',
revertDuration: 500,
appendTo: 'body',
helper: function(event, ui) {
return $(this).clone().appendTo('body').css('zIndex', 5).show();
},
drag: function(event, ui) {
/* $(ui.helper).removeClass("enlarge");
$(ui.helper).addClass("thumbnail"); */
$(this).hide();
},
stop: function(event, ui) {
$(this).show();
//$(this).addClass("enlarge");
if ($(this).parent().hasClass("imageContainer")) {
$(this).addClass("thumbnail");
}
else {
$(this).addClass("enlarge");
}
},
//cursorAt: { top: 30, left: 40 },
delay: 100,
refreshPositions: true
});
Try replacing your code with this block above and see if it comes close to what you want. It may not be perfect yet, but let's see if we can tackle one change at a time. What I'm hoping to observe is that it drops approximately like it should.