I would like to enable drag and drop within an sapui5 app. To do so I'm using the jQuery draggable and droppable widgets. Whenever I'm dragging an element from the master view to the detail view or vise versa the dragged element is hiding behind the other view. The drop is still recognized, the element is just don't show up. Basically both views are just div's. It could have something to do with the overflow property but I'm not getting any sense into it.
I'm using those parameters on my draggable function:
draggable({
helper: "clone",
cancel: true,
cursor: "pointer",
stack: "
})
Here's a sample jsbin: http://jsbin.com/werewuf/4/edit?html,output
As the sapMNav sapMSplitContainerMaster sapMSplitContainerMasterVisible element having overflow : hidden property, any child of this parent can not be seen visible out of this container.
Set 'overflow' : 'visible' for parent element and also for dragButton.$().parent().css("overflow-y", "visible").css("overflow-x", "visible");
$('.sapMSplitContainerMasterVisible').css('overflow', 'visible');
JSBin Demo
Related
I'm trying to create drag and drop activity where left side have some images and we have to drop that images into right inside the targeted div. can somebody help me or guide me on this i am new in html5 and jquery?
also if the draggable item is not match with that particular targeted div then it comes back to its original place
logic is like that
img drag
{
if(img == targeted div){
img place inside div
}
else{
it reverts to its original position
}
and visa versaaa
You need jquery UI draggable and droppable for this. You can refer them here: http://api.jqueryui.com/droppable & http://api.jqueryui.com/draggable .
I created a fiddle for it. So the images having class "yes" will only be dropped in the div, rest of them will not be dropped.
Here is the sample code:
$('.drag img').draggable({
revert: 'invalid',
});
$('.drop div').droppable({
accept: '.yes'
});
Jsfiddle link: http://jsfiddle.net/p2taQ/
Please take a look at this link. This draggable DIV failed to stay within the dashed DIV? Tried setting overflow: hidden at dropzone but the draggable DIV still going out of it instead of hiding it?
You need to use the containment parameter of the draggable plugin:
$('#innerDropzone').draggable({
containment: "parent"
});
Example fiddle
parent is the setting here, although you can provide a selector for any required element:
$('#innerDropzone').draggable({
containment: "#dropzone"
});
I have a small problem which i can't seem to solve myself.
Look at this fiddle:JSfiddle
This is a basic example of the problem I have.
I have a large div which is a droppable area. Inside this droppable area are multiple other droppable areas.
The inner droppable area should walk trough its code when the element is dropped. Instead the code from the outer div seems to run.
Am i doing something wrong? The area around the divs should stay this way because elements can be placed here (not officially dropped).
I hope my question is clear enough, but I think the fiddler speaks for itself.
P.S. - resizing in this example isn't functioning but is functioning in my development environment.
Rusty and Mark,
Thank you for your replies.
I'm sorry for the confusing resizer. I just removed that from the code.
New Fiddler
Just to clarify things. The box div is a container which has multiple images in it. I am trying to achieve the following:
http://postimage.org/image/qwhtik04f/
The grey dotted boxes are the dropbox2 div from my example.
The space around those drop boxes are dropbox div.
The space with the board is the only place where images may be dropped without anything happening.
The dragged images can snap back to the dropbox2 divs.
If the images are dragged onto the dropbox div, the images should revert.
Setting the greedy: true option on the inner droppable will prevent the event from happening on the outer droppable:
jQuery('#dropbox2').droppable({
greedy: true,
drop: function(event, ui) {
// ...
}
});
Your code has this for the outer <div>:
$("#dropbox").droppable({
drop: function(event, ui) {
ui.draggable.draggable( 'option', 'revert', true );
}
});
This says to set the revert option to true when you drag into the outer <div>. However, when you drop in the smaller <div>, the option is still set to true. All you need to do is change the revert value on your draggable element after a successful drop in your inner <div>:
$("#dropbox2").droppable({
drop: function(event, ui) {
ui.draggable.position( { of: $(this), my: 'center', at: 'center' } );
// Add this line
ui.draggable.draggable( 'option', 'revert', false );
}
});
Update:
Mark pointed out that my solution doesn't stop the propagation of the event to the parent container. As his answer shows, you need to add greedy: true in your initial options. The jQuery documentation says:
If true, will prevent event propagation on nested droppables.
That sounds like what you're looking for. You still need to change the revert property on your draggable, since greedy is only set on your droppables and won't affect your draggable reactions.
I have been pulling my hair out trying to make this work.
I have two connected sortables, defined like so:
var sortlists = $("#List1, #List2").sortable(
{
appendTo: 'body',
tolerance: 'pointer',
connectWith: '#List1, #List2',
revert: 'invalid',
forceHelperSize: true,
helper: 'clone',
scroll: true
});
Here is a link to an example of jsfiddle
Because of the page setup, both sortables are being contained in div's with overflow: auto they are also wrapped in parent containers with overflow set to hidden. For arguments sake, lets say there is no way around that.
Is there a way to make the container element scroll when the helper is being positioned towards the lower or upper edge of the container?
Any help would be appreciated!
With helper:'original', I get the scrolling behaviour you seek, (in Opera 11.61).
forked fiddle
Edit: Here's a version of the fiddle with "ganged-scrolling"
I think this is what you want. Drag from div (with scrollable) to div (with scrollable) without the dragged item appearing behind the div.
http://jsfiddle.net/nURN5/1/
.document.body.appendChild //required to add code with link...
The next best approach would be to actually drag a clone of the item...
The forked fiddle with "ganged-scrolling" unfortunately exhibits the very nasty side effect of constraining (visually) the selected item to it's own div.
I'm using the drag and drop plugin with jQuery UI. I'd like to make it so that the draggable container can only be dragged and dropped on the container. In the demonstration:
http://jqueryui.com/demos/droppable/#revert
It has 2 options. One is to revert when it drags to the container, the second is to revert when it isn't dragged to the container.
Is there a way to combine these two? I don't want to be able to drag the #draggable container anywhere where there isn't a #droppable container.
As stated above, I found the solution by adding :
$('#draggable2').remove();
$('#draggable').draggable({ revert: true });