I would like to update the following javascript code based on Prototype framework to jQuery framework:
Event.observe(window, 'load', function() {
$$('.piece').each(function(item) {
new Draggable(item, { revert: true } );
});
$$('.cell').each(function(item) {
Droppables.add(item, {
accept: 'piece',
onDrop: function(piece, cell) {
cell.descendants().each(function(item) { item.remove(); } );
piece.remove();
piece.setStyle({ 'top': null, 'left': null });
new Draggable(piece, { revert: true });
cell.appendChild(piece);
}
});
});
});
The first part of the script is easy to convert:
$(function() {
$('.piece').draggable(
{
evert: true
}
);
$('.cell').droppable(
{
/* But here, it's more difficult. Right? ;)
... */
}
});
});
Have you got an idea? Any part of code is welcome. Thanks a lot.
Here's what I have:
jQuery(document).ready(function(){
$('.piece').draggable({
revert: true
, scope: 'piece_and_cell'
});
$('.cell').droppable({
drop: function(event, ui) {
var cell = $(this);
cell.empty();
var piece = ui.draggable.detach()
piece.css({top:null, left: null}).appendTo(cell);
piece.draggable({
revert: true
, scope: 'piece_and_cell'
})
}
, scope: 'piece_and_cell'
});
});
Related
I have a problem with a jquery plugin.
I just add a plugin like this :
$.ui.plugin.add("draggable", "smartguides", {
//
start: function(event, ui) {
console.log('TOTO');
}
//
}
I set my options there :
function draggableElementParameters(hash_id, is_smartguides)
{
var datas = {
containment:"#container_page",
scroll: false,
cursor:"pointer",
opacity: 0.35,
tolerance: 5,
cancel: "#cr-stage",
smartguides: '.element-container',
stop: function (event, ui) {
//
});
}, drag: function (event, ui) {
//
}
};
return datas;
}
Then I call it like this :
$("#element-edit").draggable(window.parent.draggableElementParameters({{ json_encode($element->hash_id) }}, Helpers.Utils.Cookie.isTrue('backend-contest-editor-is-draggable-help')));
And to finish, element-container is ok in my view.
The fact is the plugin is never triggered, the console.log never appear.
Any ideas about this bug ?
thank you !
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 disable jquery sortable on a list of items when there is only one item remaining in the list. Here is my code so far:
$(".draggable_teams").sortable({
handle: '.team-header .grabber',
revert: 100,
tolerance: 'pointer',
connectWith: '.draggable-team-connector',
placeholder: 'highlight-teams',
helper: function (e, ul) {
var $originals = ul.children();
var $helper = ul.clone();
$($helper).find("[teamorder='teamorder']").addClass('clone-teams');
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
start: function (ul) {
$('.clone-teams .team').slideUp(400);
},
update: function () {
updateListScope();
scope.saveTeamOrder();
}
}).disableSelection();
}
Any help at all would be greatly appreciated :) Thanks.
I think you may use the length function
if($(".draggable_teams").children('li').length>1)
{ your code }
else{ $( ".draggable_teams" ).sortable( "disable" ); }
Managed to figure this out in the end thanks to all your help. Here is my completed code.
$(".draggable_teams").sortable({
handle: '.team-header .grabber',
revert: 100,
tolerance: 'pointer',
connectWith: '.draggable-team-connector',
placeholder: 'highlight-teams',
start: function () {
$('.clone-teams .team').slideUp(400);
},
helper: function (e, ul) {
var $originals = ul.children();
var $helper = ul.clone();
$($helper).find("[teamorder='teamorder']").addClass('clone-teams');
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
update: function () {
updateListScope();
scope.saveTeamOrder();
}
}).disableSelection();
}
scope.$watch("teams", function(){
setSortability();
});
function setSortability() {
if(!scope.teams || scope.teams.length < 2){
$( ".draggable_teams" ).sortable( "disable" );
}
else{
$( ".draggable_teams" ).sortable( "enable" );
}
}
Backbonejs.org says
"— while very deliberately avoiding painting you into a corner by making any decisions that you're better equipped to make yourself."
So I have a BackBone view like this:
var LotsaToys= Backbone.View.extend({
el: '#CaveToy',
events: {
'click .slide': 'slideAnimal'
},
initialize: function (obj) {
this.collection = new Yoyo(obj);
this.render();
},
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
},
renderBook: function (item) {
var ToyView = new oneToy({
model: item
});
this.$el.append(ToyView .render().el);
}
});
And simple Jquery code like this:
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
Do I combine these to by simply adding the JQuery code in the slide function?
(Simple Jquery image slider)
slideAnimal: function (event) {
$(document).ready(function () {
var sudoSlider = $("#slider").sudoSlider({
vertical: true,
continuous: false
});
});
});
Im a noob, so please give me a explanation ,not sure what way is 'good practice' or what way would be better to implement..
You need place it after render
render: function () {
this.collection.each(function (item) {
this.renderToy(item);
}, this);
this.slideAnimal();
},
slideAnimal: function() {
this.$("#slider").sudoSlider({
vertical: true,
continuous: false
});
}
DEMO
I have following code in iviewer. here i want to show the image to be filled in whole grey box.
HTML:
<div id="viewer" class="viewer"></div>
JS:
var $ = jQuery;
$(document).ready(function () {
var iv1 = $("#viewer").iviewer({
src: "http://test.dpetroff.ru/jquery.iviewer/test/test_image.jpg",
update_on_resize: false,
zoom_animation: false,
mousewheel: false,
onMouseMove: function (ev, coords) {},
onStartDrag: function (ev, coords) {
return false;
}, //this image will not be dragged
onDrag: function (ev, coords) {}
});
$("#in").click(function () {
iv1.iviewer('zoom_by', 1);
});
$("#out").click(function () {
iv1.iviewer('zoom_by', -1);
});
$("#fit").click(function () {
iv1.iviewer('fit');
});
$("#orig").click(function () {
iv1.iviewer('set_zoom', 100);
});
$("#update").click(function () {
iv1.iviewer('update_container_info');
});
});
Does anyone have idea for how to do that?
Add this callback to your iviewer initialization:
onFinishLoad: function () {
iv1.iviewer('zoom_by', 1);
}
Fiddle updated here.