jQWidgets Forums

Tagged: angular sortable, javascript sortable, jquery sortable, sortable handle

This topic contains 4 replies, has 2 voices, and was last updated by longtruong 9 years ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

handle property of jqxSortable seems not to work Posts

June 2, 2016 at 2:59 am handle property of jqxSortable seems not to work #84824

longtruong

Participant

Hello,

I have following script:

<script src="jquery.js"></script>
<script src="jqx-all.js"></script>

<script>
	$(function() {
		$('#div_sortable').jqxSortable({
			axis: 'y',
			opacity: 0.7,
			cursor: "move",
			handle: "#lii_sort1",
			placeholderShow: 'sortable-placeholder',
			forceHelperSize: true
		});
	});
</script>

<style>
	#div_container{
		width: 800px;
		height: 500px;
	}
			
	.coltitle{
		vertical-align: middle;
		line-height: 30px;
		font-weight: bold;
		font-size: 18px;
		display: table-cell;
		background-color: #CCCCCC;
	}

	.colcontent{
		vertical-align: middle;
		line-height: 26px;
		border: 1px solid #000000;
		font-size: 18px;
		display: table-cell;
		background-color: #FFFFFF;
	}
	
	.sortable-placeholder {
            background-color: lightgray;
            height:18px;
			margin-bottom:10px;
            border:orange dotted 1px;
          }
	
</style>

<body>
	<center>
		<form id="frm_main" name="frm_main" action="" method="post">	
			<div id="div_container">
				<div id="div_sortable" style="width:800px; border-collapse:collapse;">
					<ul style="display:table-row;">
						<li class="coltitle" style="width:26px; border: 1px solid #000000;">#</li>
						<li class="coltitle" style="width:44px; border: 1px solid #000000;">No.</li>
						<li class="coltitle" style="width:200px; border: 1px solid #000000;">Group</li>
						<li class="coltitle" style="width:200px; border: 1px solid #000000;">Info</li>
						<li class="coltitle" style="width:230px; border: 1px solid #000000;">Structure</li>
						<li class="coltitle" style="width:100px; border: 1px solid #000000;">Options</li>
					</ul>

					<ul style="display:table-row;">
						<li id="lii_sort1" class="colcontent" style="width:26px; border: 1px solid #000000;">#</li>
						<li class="colcontent" style="width:44px; border: 1px solid #000000;">1</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Group 1</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Info 1</li>
						<li class="colcontent" style="width:230px; border: 1px solid #000000;">Structure 1</li>
						<li class="colcontent" style="width:100px; border: 1px solid #000000;">Option 1</li>
					</ul>
					<ul style="display:table-row;">
						<li id="lii_sort1" class="colcontent" style="width:26px; border: 1px solid #000000;">#</li>
						<li class="colcontent" style="width:44px; border: 1px solid #000000;">2</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Group 2</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Info 2</li>
						<li class="colcontent" style="width:230px; border: 1px solid #000000;">Structure 2</li>
						<li class="colcontent" style="width:100px; border: 1px solid #000000;">Option 2</li>
					</ul>
					<ul style="display:table-row;">
						<li id="lii_sort1" class="colcontent" style="width:26px; border: 1px solid #000000;">#</li>
						<li class="colcontent" style="width:44px; border: 1px solid #000000;">3</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Group 3</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Info 3</li>
						<li class="colcontent" style="width:230px; border: 1px solid #000000;">Structure 3</li>
						<li class="colcontent" style="width:100px; border: 1px solid #000000;">Option 3</li>
					</ul>
					<ul style="display:table-row;">
						<li id="lii_sort1" class="colcontent" style="width:26px; border: 1px solid #000000;">#</li>
						<li class="colcontent" style="width:44px; border: 1px solid #000000;">4</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Group 4</li>
						<li class="colcontent" style="width:200px; border: 1px solid #000000;">Info 4</li>
						<li class="colcontent" style="width:230px; border: 1px solid #000000;">Structure 4</li>
						<li class="colcontent" style="width:100px; border: 1px solid #000000;">Option 4</li>
					</ul>
				
			</div>
		
		</form>
	</center>
</body>

I always receive javascript error message (jqx-all.js:7 Uncaught TypeError: a(…).find(…).addBack is not a function) on the console when I start drag and drop feature.

Please let me know how to solve this issue.

Thanks,

Long

June 2, 2016 at 7:23 am handle property of jqxSortable seems not to work #84832

ivailo

Participant

Hi longtruong,

Please, update to the latest version(4.1.2).
Here is a demo with your code. It seems to work well.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 2, 2016 at 9:25 am handle property of jqxSortable seems not to work #84835

longtruong

Participant

Hello ivailo,

Thanks for your help. It works.

One more thing, when dragging, the dragged item seems to have smaller size than the original one. Please look at the width of each column in the below image for more information.

jqxSortable

Is there any way for the dragged item having the same size as the original one?

Thanks,

Long

June 3, 2016 at 6:32 am handle property of jqxSortable seems not to work #84859

ivailo

Participant

Hi longtruong,

You can modify the helper’s class(.jqx-sortable-helper).
If you use width, equal to the table’s width the size of the dragged item will remain the same.

Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 3, 2016 at 6:44 am handle property of jqxSortable seems not to work #84863

longtruong

Participant

Hello ivailo,

Thanks for your help. It works perfectly.

Best Regards,

Long

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.