I have 4 droppable blocks and 1 draggable image, how to achive effect of revertion, only if the I dropped my image not into droppable element?
I used this options, but can't reach wished result:
$('.myimage').draggable({
scope: "tasks",
revert: true,
revertDuration: 1,
stop: function(event, ui) { }
});
$('.keeper').droppable({
accept: ".card",
scope: "tasks",
tolerance: "fit",
greedy: true,
drop: function(event, ui) {
$(this).css("background-color","green");
//$('.card').draggable({ scope: "tasks", revert: false });
}
});
so as you can see the revert set to "true", and when I dropped image not into .keeper, I have the revertion effect, and it's works fine untill I'm not drop .myimage to .keeper, after that I can dropping .myimage to everywhere on the page (revert doesn't work anymore), but I'm still need that .myimage was with this feature as for non-.keeper class elements, I hope you understand what I want.
Related
I need help to make draggable element stay at the new position when dropped,I tried to look at their examples but cant really get it.
Here is the code:
$(function () {
'use strict'
// Make the dashboard widgets sortable Using jquery UI
$('.connectedSortable').sortable({
placeholder: 'sort-highlight',
connectWith: '.connectedSortable',
handle: '.card-header, .nav-tabs',
forcePlaceholderSize: true,
zIndex: 999999
})
$('.connectedSortable .card-header').css('cursor', 'move')
// jQuery UI sortable for the todo list
$('.todo-list').sortable({
placeholder: 'sort-highlight',
handle: '.handle',
forcePlaceholderSize: true,
zIndex: 999999
})
})
My Code is like this :
$(function () {
$("ol.mauDIDROP").sortable({
group: '.example'
});
$("ol.areaDROP").sortable({
group: '.example',
drop: false,
drag: false,
});
$("ol.areaDROP>li>ol").sortable({
group: '.example',
drop: true,
});
});
Demo & complete code : https://jsfiddle.net/oscar11/15qvta6p/6/
Drag & drop is working
But if :
<li>Single Room<ol></ol></li>
<li>Double Room<ol></ol></li>
<li>Family Room<ol></ol></li>
I move to javascript to use append like this : https://jsfiddle.net/oscar11/kdf7xngk/1/
Drag & drop is not working
Any suggestions on how I can solve this problem?
Thank you
change your script to:
$(function() {
$("ol.areaDROP").append("<li>Single Room<ol></ol></li><li>Double Room<ol></ol></li><li>Family Room<ol></ol></li>");
$("ol.mauDIDROP").sortable({
group: '.example'
});
$("ol.areaDROP").sortable({
group: '.example',
drop: false,
drag: false,
});
$("ol.areaDROP>li>ol").sortable({
group: '.example',
drop: true,
});
});
I have an iframe with several draggable divs inside. When dragging the items I want the iframe to automatically scroll up and down when it needs to, however it currently only scrolls up. I have tried it with the scroll option set to true however this doesn't work.
iFrame page is the following repeated enough to allow the page to scroll (https://jsfiddle.net/zhm6qjaz/):
<div class="block-style">
Header
</div>
The main page code ( https://jsfiddle.net/huLr2zkv/ ):
<iframe id="editor-frame" src="https://jsfiddle.net/zhm6qjaz/show" style="height:500px; width:100%; border:none;"></iframe>
<script>$(document).ready(function() {
$('#editor-frame').load(function (event) {
var iframe = $('#editor-frame').contents();
iframe.find('.block-style').draggable({
delay: 200,
helper: "clone",
iframeFix: true,
iframeOffset: $('#editor-frame').offset(),
appendTo: 'parent.body',
start: function (event, ui) {
$(this).addClass('selected');
},
drag: function (event, ui) {
},
stop: function (event, ui) {
$(this).removeClass('selected');
}
});
iframe.find('.block-style', window.top.document).droppable({
tolerance: "pointer",
iframeFix: true,
over: function (event, ui) {
},
out: function (event, ui) {
},
drop: function (event, ui) {
}
});
});
});</script>
I'm not sure what else to try, my guess is that this is not the expected behaviour and that when dragging down in the iframe it should automatically scroll?
In my draggables, the code at start: and stop: is getting too big (50-100 lines) that I am starting to have readability issues.
$(".dra").draggable({
revert: "invalid",
start: function(ev, ui){
//...50-100 lines...
},
stop: function(ev, ui){
//...50-100 lines...
}
});
To fix the readability, I want to create two global functions startDrag() and stopDrag() and just insert them like start: startDrag(ev, ui). But I failed managed to make this work:
function startDrag(ev, ui){
//...50-100 lines...
}
function stopDrag(ev, ui){
//...50-100 lines...
}
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag(ev, ui),
stop: stopDrag(ev, ui)
});
}
Any ideas why this isn't working?
Try changing it to:
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag,
stop: stopDrag
});
}
Because of function scope, could be just write like this:
function createDraggables(){
$(".dra").draggable({
revert: "invalid",
start: startDrag,
stop: stopDrag
});
}
I have multiple images on a page, that pops up the related big image in a dialog box.
But when I click image 2, images 1 shows first before image 2 comes in, in the first .5 seconds.
How can I clear image 1 out completed when I close it?
I try destroy, but that kills the entire functionality when time to click image 2.
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
position: 'middle',
draggable: false,
minWidth: '960',
maxheight:'500',
overlay: true,
modal: true,
show: "fade",
hide: "fade",
position:'top',
close: function(event, ui) {
$("#dialog").dialog("destroy");
}
});
});
.dialog('destroy') only removes the dialog capabilities from that div. you need to empty it!
close: function(event, ui) {
$("#dialog").empty().dialog("destroy");
}
edit: ahh, right, you want to keep the dialog, but empty it right? take off the .dialog('destory') then, just empty it.
close: function(event, ui) {
$("#dialog").empty();
}
I use remove instead of empty..
close: function(event, ui) {
$("#dialog").remove().dialog("destroy");
}