Solved

jquery ui draggable/droppable/sortable

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

943 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now