We Keep Coding

Plugin jquery doesn't launch

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 !

JQuery sortable Disable sorting when only one element exists

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" );
}
}

jQuery draggable won't automatically scroll iframe down

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?

Changing Jquery key binding for Modal Dialog

I have a modal dialog. I need to close the dialog on a different key combination than the Easape key. How can I do that.
I have the following code, but that never is executed. Any clues why ?
var agreeDialog = $j('#termsOfAgreementConfirm').dialog({
modal: true,
autoOpen:false,
resizable:false,
width : 1000,
height :400,
stack:false,
title:"Terms of Usage",
open: function(event, ui) { $j('.ui-dialog-titlebar-close').hide(); },
buttons: {
Disagree: function() {
disagree.dialog('open');
disagree.dialog('moveToTop');
},
Agree: function() {
$j(this).dialog('close');
$j.cookie("agree","Y");
new Ajax.Request('/test/user/ajaxUpdateAgreementForUser',
{
onSuccess:function(resp){
},
onError: function(resp) {
alert("Error:" + resp.toJSON());
return;
},
asynchronous:true,
evalScripts:true
});
$j(this).dialog('close');
}
}
});
if (result == "false" && $j.cookie("agree")== null) {
agreeDialog.dialog('open')
agreeDialog.keyup(function e() {
alert(e.keyCode);
});
}

You will need to catch the key events on the body and then trigger the close event. See this exmaple. Pressing any key will close the dialog box. You have to do it outside your declaration.
http://jsfiddle.net/yu8Sg/
$('body').keyup( function(e) {
$('#dialog').dialog('close');
});

Javascript conversion, from Prototype to jQuery

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'
});
});