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,
});
});
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
})
})
I'm using sortable ui jquery in my page, where i sort collapsed panels that expand on click
the problem is on mobile browser, click event is fired twice so on click it expands then collapses again
any ideas ?
Sortable UI
$( ".sortable" ).sortable({
handle: '.portlet-header',
sort: function(event, ui) {
$(ui.item).find(".processHeader").addClass("dragging");
},
axis: 'y',
revert: true,
scroll: false,
cursor: 'move',
helper : 'clone',
update: function(event, ui) {
ui.item.unbind("click");
ui.item.on("click",function (e) {
e.preventDefault();
return false;
});
},
placeholder: 'sortable-placeholder',
start: function(event, ui) {
// $(ui.item).find(".processHeader").addClass("dragging");
ui.placeholder.html(ui.item.html());
ui.item.css("transform", "rotate(1deg)");
},
stop:function (event,ui) {
ui.item.css("transform", "rotate(0deg)");
},
// forcePlaceholderSize: true,
delay: 350
});
Binding click event for headers
$('.processHeader').off().on('click', fireExpand);
expand function
fireExpand=function () {
// e.preventdefault();
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}
I know it's not optimal but did you try using setTimeout() in order to "ignore" the second click?
fireExpand=function () {
setTimeout(function() { } , 1000)
if(!($(this).hasClass('dragging'))){
alert(10);
console.log(10);
if($(this).hasClass('expanded')){
$($(this).parent()).find('.portlet-body').slideUp('fast');
$(this).removeClass('expanded').addClass('collapsed');
$(this).find(".fa-chevron-up").removeClass('fa-chevron-up').addClass('fa-chevron-down');
}
else if($(this).hasClass('collapsed')){
$($(this).parent()).find('.portlet-body').slideDown('fast');
$(this).removeClass('collpased').addClass('expanded');
$(this).find(".fa-chevron-down").removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
}
else {
alert(5);
console.log(5);
$(this).removeClass('dragging');
}
}
Kind regards,
Charalampos
I'm trying to create a custom file uploader for frontend in wordpress. I've found this code:
file_frame = wp.media({
multiple: false
});
file_frame.open();
It works like a charm. But i've been searching and I havent found a full list of the attributes that can be modified in wp.media
Here is the code to open the default wp media gallery onclick of some button ,
$example_images.sortable({
items: 'li',
cursor: 'move',
scrollSensitivity: 40,
forcePlaceholderSize: true,
forceHelperSize: false,
helper: 'clone',
opacity: 0.65,
placeholder: 'wc-metabox-sortable-placeholder',
start: function( event, ui ) {
ui.item.css( 'background-color', '#f6f6f6' );
},
stop: function( event, ui ) {
ui.item.removeAttr( 'style' );
},
update: function() {
var attachment_ids = '';
jQuery( '#bs_example_images' ).find( 'ul li' ).css( 'cursor', 'default' ).each( function() {
});
}
});
Thank you
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?
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.