Develop Reference

Jquery sortable - limit droppables

I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});

You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/

dragging DIVs to horizontal sortable container

I'm building some sort of a playlist creator. I have some items the user can choose from and a horizontal sortable timeline area to drop those items on.
The Draggable:
$(".Name:not(#Add a .Name)").draggable({
revert: 'invalid',
start: function(){
$('#MainPage').css('cursor', '-moz-grabbing');
$(".Name").css('cursor', '-moz-grabbing');
},
// helper: "clone",
helper: function() {
return $("<div class='"+$(this).parent().attr('class')+"' id='"+$(this).parent().attr('id')+"'><div class='"+$(this).attr("class")+"' id='"+$(this).attr("id")+"'>"+ $(this).attr("class").split(' ')[1] +"</div></div>");
},
stop: function() {
$('#MainPage').css('cursor', 'auto');
$(".Name").css('cursor', '-moz-grab');
},
connectToSortable: "#TimelineDrop",
appendTo: '#MainPage',
containment: 'DOM',
zIndex: 800,
addClasses: false
});
The Sortable:
$("#TimelineDrop").sortable({
over: function(event, ui) {
var Breite = ((TimeSpace*5)/(TimeSpace/(currentspacing+24)))-2;
$("#TimelineDrop").append("<div class='TimelineMarker' style='width:"+ Breite +"px;'>\u00A0</div>");
},
receive: function(event, ui) {
dropped=true;
AddElementToTimeline($(this), event, ui, dropped);
},
start: function( event, ui ){
$('#MainPage').css('cursor', '-moz-grabbing');
$('.TimelineElement').css('cursor', '-moz-grabbing');
drag=true;
},
axis: "x",
stop: function( event, ui ){
$('#MainPage').css('cursor', 'auto');
$('.TimelineElement').css('cursor', '-moz-grab');
database.updateElementPosition($('.TimelineElement').index($(ui.item)), $(ui.item).children('.TimelineElementTitle').attr('id').split('D')[1], GET('id'));
drag=false;
}
});
I tried all kinds of different stuff but can't get it to work propperly. What would like to be able to is drag items from the available area to the timeline und drop them between allready appended ones. So far the helper allways get appended (vertically) above the existing elements and when I drop it the final element get append at the very last position. I hope It's clear what I'm trying to archive...
I have a fiddle right here:
http://jsfiddle.net/5SBax/4/
I want the marker to be displayed where the element will be added (between others). And I need to get rid of the helper element which also get added every time...

Take a look at this fiddle. I'm not quite sure what you are asking, but this is a good example of drag and drop capabilities. I can't comment, and I am not quite sure what you are asking. But best of luck to you!
http://jsfiddle.net/cuhuak/4CHDZ/
function FieldType(typeName, name) {
var self = this;
self.TypeName = ko.observable(typeName || "");
self.Name = ko.observable(name || this.TypeName());
self.createField = function () {
return new Field(
{
Name: this.Name(),
TypeName: this.TypeName()
}
);
}
self.onDragStart = function(event, ui) {
dropFieldType = ko.utils.domData.get(this, "ko_drag_data");
};
self.onDragStop = function(event, ui) {
dropFieldType = null;
};
}

Drag event not working - prevents drag and drop

Edit: I'd still like to know the answer to this question for knowledge's sake. I managed to get a similar effect to what I want using the out event on a drop event though.
I have a working drag and drop that will record which box an image has been placed in. However, when I created a drag event to account for the fact a user removes an image from the box it breaks the drag and drop causing the images to be undraggable.
The only difference between the two code sections below is the latter has the addition of
start: handleDragEvent and it's associated function to write "Moved".
Code Works:
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img'});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: handleDropEvent
} );
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
var droppableId = $(this).attr("id");
alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
document.getElementById(draggableId).value = droppableId;
}
Code no longer works:
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: handleDropEvent
} );
}
function handleDragEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
document.getElementById(draggableId).value = "Moved";
}
function handleDropEvent( event, ui ) {
var draggable = ui.draggable;
var draggableId = ui.draggable.attr("id") + 'PLACE';
var droppableId = $(this).attr("id");
alert( 'BLARGH "' + draggableId + '" was dropped onto me!' + droppableId );
document.getElementById(draggableId).value = droppableId;
}

You need to pass in the event and ui parameters to your handleDragEvent() and handleDropEvent() functions.
function init() {
$('#ImageE1, #ImageE2, #ImageE3').draggable({ containment: '#ForDualScreen', cursor: 'move', zIndex: 20000, handle: 'img', start: handleDragEvent});
$('#BoxE1, #BoxE2, #BoxE3, #BoxE4, #BoxE5, #BoxE6, #BoxE7, #BoxE8, #BoxE9, #BoxE10, #BoxE11, #BoxE12, #BoxE13, #BoxE14, #BoxE15').droppable( {
drop: function(event, ui) { handleDropEvent(event, ui); }
});
}

Show/hide div based on value of jquery UI slider

I am using the jQuery UI slider and trying to show a div when the slider hits a certain value and hide it otherwise. The div is showing/hiding but at unexpected moments. Can anyone spot where I'm going wrong with my syntax? Here's the script:
$(function() {
//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));
//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));
//config
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),orientation: "vertical",range: "min",step: 304,
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
// here's where I'm trying to show and hide a div based on the value of the slider
if ($("#slider").slider("value") == 304) {
$("#test").show();
} else {
$("#test").hide();
}
}
};
//create slider
$("#slider").slider(sliderOpts);
$("#amount").val('$' + $("#slider").slider("value"));
});

I did this for a project recently, but mine was showing a span tag as a warning note to users, the following is the code I used and its works fine:
$("#slider").slider({
animate: true,
min: 0,
max: 10000,
range: true,
slide: function(event, ui) {
$("#amount").val(ui.values[1]);
if (ui.values[1] > '2000') { //2000 is the amount where you want the event to trigger
$('.slider-warning').css('display', 'block');
} else {
$('.slider-warning').css('display', 'none');
}
}
});
so you should be able to just use this, but change the necesary attributes i.e the value and the selectors etc.
Edit - updated answer follows
got it, the ui.values was wrong, find below the corrected code
var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
orientation: "vertical",
range: "min",
step: 304,
slide: function(event, ui) {
conveyor.css("left", "-" + ui.value + "px");
$("#amount").val('$' + ui.value);
if (ui.value > '200') { //200 is the amount where you want the event to trigger
$('#test').css('display', 'block');
} else {
$('#test').css('display', 'none');
}
}
};
this is taken straight from ur code, also notice:
if (ui.value > '200')
you'll need to change this to how ever you want the event to be triggered.
Hope this helps :)

jQuery-ui slider - How to stop two sliders from controlling each other

This is in reference to the question previously asked
The problem here is, each slider controls the other. It results in feedback.
How do I possibly stop it?
$(function() {
$("#slider").slider({ slide: moveSlider2 });
$("#slider1").slider({ slide: moveSlider1 });
function moveSlider2( e, ui )
{
$('#slider1').slider( 'moveTo', Math.round(ui.value) );
}
function moveSlider1( e, ui )
{
$('#slider').slider( 'moveTo', Math.round(ui.value) );
}
});

This is sort of a hack, but works:
$(function () {
var slider = $("#slider");
var slider1 = $("#slider1");
var sliderHandle = $("#slider").find('.ui-slider-handle');
var slider1Handle = $("#slider1").find('.ui-slider-handle');
slider.slider({ slide: moveSlider1 });
slider1.slider({ slide: moveSlider });
function moveSlider( e, ui ) {
sliderHandle.css('left', slider1Handle.css('left'));
}
function moveSlider1( e, ui ) {
slider1Handle.css('left', sliderHandle.css('left'));
}
});
Basically, you avoid the feedback by manipulating the css directly, not firing the slide event.

You could store a var CurrentSlider = 'slider';
on mousedown on either of the sliders, you set the CurrentSlider value to that slider,
and in your moveSlider(...) method you check whether this is the CurrentSlider, if not, you don't propagate the sliding (avoiding the feedback)

You could just give an optional parameter to your moveSlider1 and moveSlider2 functions that, when set to a true value, suppresses the recursion.

A simpler approach which is kind of a hybrid of the above answers:
var s1 = true;
var s2 = true;
$('#slider').slider({
handle: '.slider_handle',
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s1)
{
s2 = false;
$('#slider1').slider("moveTo", ui.value);
s2 = true;
}
}
});
$("#slider1").slider({
min: -100,
max: 100,
start: function(e, ui) {
},
stop: function(e, ui) {
},
slide: function(e, ui) {
if(s2)
{
s1 = false;
$('#slider').slider("moveTo", ui.value);
s1 = true;
}
}
});
});

Tried this now and all answers do not work possibly due to changes to jquery ui.
The solution of Badri works if you replace
$('#slider').slider("moveTo", ui.value);
with
$('#slider').slider("option", "value", ui.value);