Solved

jquery ui draggable/droppable/sortable

Posted on 2012-03-18
9
981 Views
Last Modified: 2012-04-05
This is what i have so far

$(function() {

        $('#bin').sortable({
            placeholder: 'deletingPlaceholder',
            update: function (event, ui) {
                ui.item.hide();

            }
        });
	$( "#drop-elements" ).sortable({
	    revert: true,
            tolerance: 'pointer',
            connectWith: '#bin',
            opacity: 0.6
		});
        $( ".drag" ).draggable({
            connectToSortable: "#drop-elements",
            helper: "clone",
			revert: "invalid"
            });
         $( "ul, li" ).disableSelection();
    });


The maximum number in sortable is 5.

How do i disable when the number of <li> is 5?
0
Comment
Question by:ScottNL1
  • 4
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37735401
disable what?
0
 
LVL 1

Author Comment

by:ScottNL1
ID: 37736522
That the #drag (draggable) cannot be dropped in #drop-elements (sortable)
0
 
LVL 1

Author Comment

by:ScottNL1
ID: 37739829
this was the best solution i could think of

	$(function() {
        $('#bin').sortable({
            placeholder: 'deletingPlaceholder',
            update: function (event, ui) {
                ui.item.hide();
            }
        });
		$( "#drop-elements" ).sortable({
			revert: true,
            tolerance: 'pointer',
            connectWith: '#bin',
            opacity: 0.6,
            update: function(event, ui) {
                showdescription();
                if( $("#drop-elements li").size() > 4 ){
                      $( ".drag" ).draggable( "option", "disabled", true );
                }else{
                      $( ".drag" ).draggable( "option", "disabled", false );
                }
            },


		});

        $( ".drag" ).draggable({
            connectToSortable: "#drop-elements",
            helper: "clone",
			revert: "invalid",
            });
         $( "ul, li" ).disableSelection();
    });

Open in new window


Would like it to be so that when max number is reached, sortable would be freezed and item that is dropped on top of sortable is replaced.

Tryed everthing but can't seem to get it to work
0
 
LVL 1

Accepted Solution

by:
ScottNL1 earned 0 total points
ID: 37790756
Maximum number of dragable items by <select> input value (id="raam")
 function checkmax(){
        var maxnum = $("#raam option:selected").val();
                if( $("#drop-elements li").size() == maxnum  ){
                      $( ".drag" ).draggable( "option", "disabled", true );
                }else{
                      $( ".drag" ).draggable( "option", "disabled", false );
         }
    }

Open in new window


$( "#drop-elements" ).sortable({
			revert: false,
            tolerance: 'pointer',
            connectWith: '#bin',
            opacity: 0.6,
            update: function(event, ui) {
                checkmax();
            },


		});

        $( ".drag" ).draggable({
            connectToSortable: "#drop-elements",
            helper: "clone",
			revert: "invalid"
            });
         $( "ul, li" ).disableSelection();

Open in new window

0
 
LVL 1

Author Closing Comment

by:ScottNL1
ID: 37810014
Please state your reason for accepting your own comment as the solution: it is the right answer
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This video teaches users how to migrate an existing Wordpress website to a new domain.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question