Author - StudySection Post Views - 451 views
jquery certification

Jquery Draggable and Droppable

1. Add bootstrap, jquery, and jquery UI(Important) or angularjs (optional if you are using angularjs) script in your app.

 <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<script src=""></script>

	<link rel="stylesheet" href="//">
	<script src=""></script>
    <script src=""></script>

2. Make two div’s where you want to your div draggable and droppable.

	 <!-- drag and drop start -->
     <div class="row col-md-width connectedSortable custom-ht add-space" id="sortable1">
        <div class="col-md-3 sqnc-box col-sm-4 box" ng-repeat="chooseDoctors in
            <div class="gray-box text-center" id="{{chooseDoctors.room_id}}">

    <div class="row squence-top">
        <span>Please drag and drop rooms here</span>

    <!-- drag and drop end here -->
    <div id="sortable2" class="row col-md-width custom-ht add-space
        <div ng-show="error_msg">

        <div ng-show="!error_msg" class="col-md-3 sqnc-box col-sm-4 box" ng-repeat="rooms in
            <div class="gray-box text-center" id="{{}}">

3. Assign two different id’s on different div’s where you want to draggable and droppable.Like id->sortable1 assigned to first div where drag and drop starts and id->sortable2 is assigned to second div where drag and drop ends.
4. Add one class which connects both div’s like class->connectedSortable is added in the above code.
5. Add script

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
		$scope.chooseDoctor = [
			{"room_id":"1", "room_name":"Room 1"}, 

			{"room_id":"2", "room_name":"Room 2"},
			{"room_id":"3", "room_name":"Room 3"}, 
			{"room_id":"4", "room_name":"Room 4"}, 
			{"room_id":"5", "room_name":"Room 5"}, 
			{"room_id":"6", "room_name":"Room 6"}, 
			{"room_id":"7", "room_name":"Room 7"}, 
			{"room_id":"8", "room_name":"Room 8"}, 
			{"room_id":"9", "room_name":"Room 9"}, 
			{"room_id":"10", "room_name":"Room 10"},  

		$ = [
			{"id":"1", "name":"Room 11"}, 
			{"id":"2", "name":"Room 12"},
			{"id":"3", "name":"Room 13"}, 
			{"id":"4", "name":"Room 14"}, 
			{"id":"5", "name":"Room 15"}, 
			{"id":"6", "name":"Room 16"}, 
			{"id":"7", "name":"Room 17"}, 
			{"id":"8", "name":"Room 18"}, 
			{"id":"9", "name":"Room 19"}, 
			{"id":"10", "name":"Room 20"},  

		$(function () {
            $("#sortable1, #sortable2").sortable({
                connectWith: ".connectedSortable"

        var positions;


		update: function (event, ui) {
			$scope.room_ids = [];
			$('#sortable1 .gray-box').each(function (e) {
				if (jQuery.inArray($(this).prop('id'), $scope.room_ids) == '-1') {


			positions = $scope.room_ids.join(',');


6. Output is:-

Leave a Reply

Your email address will not be published. Required fields are marked * cratosroyalbet betwoon grandpashabet grandpashabet giriş deneme bonusu veren siteler casino siteleri