Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2013
    Posts
    30
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Sortable list with function to submit comments

    Hi,

    I am new to this forum and also to java script programming, so I need some help from you and any help is appreciated.

    Currently I work on a HTML 5 web page with basic design and capabilities, the only challenging thing I want to add is the sortable list of some items, I plan to do it with Java script code one indicate here:

    http://johnny.github.io/jquery-sortable/

    or HTML 5:

    http://farhadi.ir/projects/html5sortable/,

    however the thin becomes difficult as I have to add the function to this list which will enable the user after making its own sorted list to make a comment in a text box regarding its sorted list and submit to my mail for example, so the idea is to get the mail with items in sorted order by user, plus his/her comment on it.

    The text box may pop up after clicking the button or it may exist in the bottom of the list.

    Pleas help and please provide with suggestions, as I need your help very much.

    For better understanding, please see the web site containing this type of function on the second page: http://p1.imagine2040.metroquest.com/

    However the site contains more complicated version of this function, I just intend as was described above.

  • #2
    New Coder
    Join Date
    Dec 2013
    Posts
    30
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Any idea will be helpful, even if there is any otehr solution, so that the sorted list can be sent to specified mail after submitting it.

  • #3
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hi,

    What exactly is your sortable list? li tags? selection list? rows in a table? simple text? do you have any html that we can see?
    Where the world once stood
    the blades of grass
    cut me still

  • #4
    New Coder
    Join Date
    Dec 2013
    Posts
    30
    Thanks
    10
    Thanked 0 Times in 0 Posts
    So far it is a just a list of priorities which then can be sorted according to the user.

    this is just a simple HTML file, because I cant attach HTML file, it can be download from here:

    http://farhadi.ir/posts/the-story-behind-html5-sortable

  • #5
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    That link is to someone's app. What am I supposed to do with it? If you can't upload or link to a page with your code, then simply post some examples and indicate where they would be: an array, an html element. something so I don't end up writing code that has nothing to do with what you want
    Where the world once stood
    the blades of grass
    cut me still

  • #6
    New Coder
    Join Date
    Dec 2013
    Posts
    30
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Sorry for the inconvenience.

    Here is the list of items and also the code to make the list sortable:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    	<meta name="author" content="">
    	<meta name="HandheldFriendly" content="true">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Untitled Document</title>
    
    <style>
    select {
        width: 100%;
    	margin: auto;
    }
    
    .chosen {
    	text-align: center
    }
    
    .priority {
    	text-align: center;
    
    	margin-top: 45px;
    }
    
    
    		.connected, .sortable, .exclude, .handles {
    			margin: auto;
    			padding: 10px;
    			width: 500px;
    			-webkit-touch-callout: none;
    			-webkit-user-select: none;
    			-khtml-user-select: none;
    			-moz-user-select: none;
    			-ms-user-select: none;
    			user-select: none;
    		}
    		.sortable.grid {
    			overflow: hidden;
    		}
    		.connected li, .sortable li, .exclude li, .handles li {
    			list-style: none;
    			border: 1px solid #CCC;
    			background: #F6F6F6;
    			font-family: "Tahoma";
    			color: #1C94C4;
    			margin: 5px;
    			padding: 5px;
    			height: 100%;
    			width:100%; 
    		}
    		.handles span {
    			cursor: move;
    		}
    		li.disabled {
    			opacity: 0.5;
    		}
    		.sortable.grid li {
    			line-height: 80px;
    			float: left;
    			width: 80px;
    			height: 80px;
    			text-align: center;
    		}
    		li.highlight {
    			background: #FEE25F;
    		}
    		#connected {
    			width: 440px;
    			overflow: hidden;
    			margin: auto;
    		}
    		.connected {
    			float: left;
    			width: 200px;
    		}
    		.connected.no2 {
    			float: right;
    		}
    		li.sortable-placeholder {
    			border: 1px dashed #CCC;
    			background: none;
    		}
    		</style>
    
    <script>
    (function($) {
    var dragging, placeholders = $();
    $.fn.sortable = function(options) {
    	var method = String(options);
    	options = $.extend({
    		connectWith: false
    	}, options);
    	return this.each(function() {
    		if (/^enable|disable|destroy$/.test(method)) {
    			var items = $(this).children($(this).data('items')).attr('draggable', method == 'enable');
    			if (method == 'destroy') {
    				items.add(this).removeData('connectWith items')
    					.off('dragstart.h5s dragend.h5s selectstart.h5s dragover.h5s dragenter.h5s drop.h5s');
    			}
    			return;
    		}
    		var isHandle, index, items = $(this).children(options.items);
    		var placeholder = $('<' + (/^ul|ol$/i.test(this.tagName) ? 'li' : 'div') + ' class="sortable-placeholder">');
    		items.find(options.handle).mousedown(function() {
    			isHandle = true;
    		}).mouseup(function() {
    			isHandle = false;
    		});
    		$(this).data('items', options.items)
    		placeholders = placeholders.add(placeholder);
    		if (options.connectWith) {
    			$(options.connectWith).add(this).data('connectWith', options.connectWith);
    		}
    		items.attr('draggable', 'true').on('dragstart.h5s', function(e) {
    			if (options.handle && !isHandle) {
    				return false;
    			}
    			isHandle = false;
    			var dt = e.originalEvent.dataTransfer;
    			dt.effectAllowed = 'move';
    			dt.setData('Text', 'dummy');
    			index = (dragging = $(this)).addClass('sortable-dragging').index();
    		}).on('dragend.h5s', function() {
    			dragging.removeClass('sortable-dragging').show();
    			placeholders.detach();
    			if (index != dragging.index()) {
    				items.parent().trigger('sortupdate', {item: dragging});
    			}
    			dragging = null;
    		}).not('a[href], img').on('selectstart.h5s', function() {
    			this.dragDrop && this.dragDrop();
    			return false;
    		}).end().add([this, placeholder]).on('dragover.h5s dragenter.h5s drop.h5s', function(e) {
    			if (!items.is(dragging) && options.connectWith !== $(dragging).parent().data('connectWith')) {
    				return true;
    			}
    			if (e.type == 'drop') {
    				e.stopPropagation();
    				placeholders.filter(':visible').after(dragging);
    				return false;
    			}
    			e.preventDefault();
    			e.originalEvent.dataTransfer.dropEffect = 'move';
    			if (items.is(this)) {
    				if (options.forcePlaceholderSize) {
    					placeholder.height(dragging.outerHeight());
    				}
    				dragging.hide();
    				$(this)[placeholder.index() < $(this).index() ? 'after' : 'before'](placeholder);
    				placeholders.not(placeholder).detach();
    			} else if (!placeholders.is(this) && !$(this).children(options.items).length) {
    				placeholders.detach();
    				$(this).append(placeholder);
    			}
    			return false;
    		});
    	});
    };
    })(jQuery);
    </script>
    
    </head>
    
    <body>
    
    <section>
     <H4 class="priority">რა არის თქვენი პრიორიტეტი?</H4>
        
        <ul class="sortable">
        
    			<li>1. ადგილობრივი თვითმმართველი ერთეულების ეკონომიკური განვითარება
    			<li>2. სახელმწიფო საკუთრებაში არსებული ქონების აღრიცხვა და მართვა
    			<li>3. სამართალდამცავი უწყებების განვითარების მხარდაჭერა
    			<li>4. სახელმწიფო თავდაცვის სისტემის განვითარების ხელშეწყობა
    			<li>5. ინფრასტრუქტურული პროგრამები და ღონისძიებები
    			<li>6. განათლების და მეცნიერების მხარდაჭერა
                <li>7. ჯანმრთელობის დაცვის და  სოციალური დახმარების სისტემა
                <li>8. სოფლის მეურნეობის მხარდაჭერა
                <li>9. ეფექტიანი სახელმწიფო მართვისა და საჯარო ფინანსების რეფორმის მხარდაჭერა
                <li>10. კულტურისა და სპორტის პროგრამების მართვა
        </ul>
    </section>
    
    <script src="js/jquery.sortable.js"></script>
    <script>
        $('.sortable').sortable();
    </script>
    
    </body>
    </html>

  • #7
    Regular Coder Vincent Puglia's Avatar
    Join Date
    Jul 2003
    Location
    where the World once stood
    Posts
    367
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hi,

    Since I don't play with jquery (I'm retired and being paid not to think), I'm hoping someone else will help you out. If not, post (or request a moderator to move) this to the jquery side. then again, I'm sure at least one of the other regulars will help you.
    Where the world once stood
    the blades of grass
    cut me still

  • #8
    New Coder
    Join Date
    Dec 2013
    Posts
    30
    Thanks
    10
    Thanked 0 Times in 0 Posts
    As far as the thread was moved to new forum, if somene can help me with this issue, I will appreciate it, if any additional resources are needed I will try to provide.

    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •