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.
Related
in my code i want divs and draggables elements dynamically, my problem is that the draggable elements are moving along the bottom of the div when scrolling, and I need that when I drag them over the div they don't move when scrolling the page.
The code jsFiddle
$(".signatureImage").on("mousedown mouseup", function(e) {
}).draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
//helper: "clone",
grid: [5, 5],
zIndex: 1000,
drag: function(event,ui){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
},
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: '+finalxPos + ' - '+finalyPos);
jQuery.post("ajaxs/",
{
finalxPos: finalxPos,
finalyPos: finalyPos,
}, function(data)
{});
}
}).each(function(i, item){
});
Drag the element inside the div and then use the scroll of the containerDocuments div, you will see that the draggable elements are moving along with the scroll
Consider the following example.
Fiddle: https://jsfiddle.net/Twisty/n5yrtou1/16/
JavaScript
$(function() {
$(".signatureImage").draggable({
containment: ".documents",
cursor: "all-scroll",
scroll: false,
grid: [5, 5],
zIndex: 1000,
stop: function(e, ui) {
var finalxPos = ui.position.left;
var finalyPos = ui.position.top;
console.log('Stop: ' + finalxPos + ' - ' + finalyPos);
}
});
$("#containerDocuments").droppable({
drop: function(e, ui) {
var el = ui.helper.detach();
el.css({
top: "",
left: "",
position: "absolute",
"z-index": 1000
}).appendTo(this).position({
my: "center",
at: "center",
of: e
});
}
});
});
Using Droppable, you can detach the Draggable element and attach it to your DIV. It is then a matter of positioning it. You can do this in many different ways, yet I opted to base it on the Event.
Initially, with your code, when you dragged it and stopped, it was given a Top & Left position based on the relative position to it's parent. When you drop it, the new position has to be relative to the new target element. You can do this with .offset(), yet it's complicated.
This allows the user to drag an element from the right onto the images, it attaches, and now when the user scrolls, the image scrolls with the rest of the DIV.
See More:
https://jqueryui.com/droppable/
https://jqueryui.com/position/
I have a simple drag and drop using jquery ui. I want to clone the element and drop the clone at the cursor position.
$(function() {
$( "#draggable" ).draggable({
grid: [ 20, 20 ],
//helper: 'clone',
});
$("#dropzone-panel").droppable({
drop: function(event, ui) {
console.log("Drop Event Fired");
}
});
});
I can drag the element and when I drop it, it stays in the correct position.
But I don't want to move the original, I want to clone it, and then drop the clone in place.
I tried calling clone and adding an appendTo in the drop function, but this just appends it to the end of the #dropzone-panel, rather than leaving it in place.
Any idea what I need to do, to clone and drop at the cursor position?
I would setup the draggable with the helper option and then the droppable with the accept option. This might look like:
$(function() {
$(".draggable").draggable({
helper: 'clone',
grid: [ 20, 20 ],
appendTo: ".droppable"
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(e, ui) {
var pos = ui.position;
var $obj = ui.helper.clone();
$obj.css({
position: 'absolute',
top: pos.top + "px",
left: pos.left + "px"
});
$obj.appendTo(".droppable");
}
});
});
You will want to make use of CSS to wrap your Droppable in a Div that has position: relative; to ensure that the absolute positioning of the appended element is maintained.
I have a Jquery UI dialog and I close it by having it sized to zero and moving its position as in:
$('#myDialog').dialog({
...
beforeClose: function() {
$("#myDialog").dialog("widget").animate({
'position': 'absolute',
'left': '1250px',
'top': '20px',
'height': '0px',
'width': '0px'
}, 600);
},
...
This works fine but not if the window is resized because the goal is to have it move towards another element. I tried the following, but it does not work:
beforeClose: function() {
$("#myDialog").dialog("widget")
.animate({'height': '0px','width': '0px'},400)
.animate({'position': { my: "right top", at:"left bottom",
of: "#myButton" }},400);
},
This does resize the dialog to zero but the positioning does not work at all.
Can you suggest any way to do this?
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/
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.