Solved

jquery ui draggable/droppable/sortable

Posted on 2012-03-18
9
991 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

685 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