Solved

jquery ui draggable/droppable/sortable

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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
removing a class in javascript 4 47
Running a javascript project in WebStorm 2 24
Angular won't showing my array result in HTML 3 24
Responsive Font Size 6 26
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 …
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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…

839 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