place your javascript code into blade template /resources/views/view_name.blade.php
for example my old script for test sorting:
routes.php
Route::post('sort', '\Rutorika\Sortable\SortableController@sort');
Route::get('sort/test', 'SortController@sort');
SortController
<?php
namespace App\Http\Controllers;
use App\Http\Requests;
use App\Cat;
class ManagerController extends Controller
{
public function sort()
{
return view('sort',['cats'=>Cat::orderBy('position')->get()]);
}
}
sort.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Laravel</title>
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery-1.8.3.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/flat-ui/js/jquery.ui.touch-punch.min.js"></script>
<script src="http://sortable5.boxfrommars.ru/vendor/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
<style>
.grid-actions {
text-align: right;
}
.grid-actions .btn {
margin-left: 16px;
}
.sortable-handle {
cursor: move;
width: 40px;
color: #ddd;
}
.id-column {
width: 40px;
}
/** notifications style */
.alert {
font-size: 14px;
}
.bootstrap-growl .close {
margin-left: 10px;
}
/** forms */
</style>
</head>
<body>
<table class="table table-striped table-hover">
<tbody class="sortable" data-entityname="cats">
@foreach ($cats as $cats)
<tr data-itemId="{{{ $cats->id }}}">
<td class="sortable-handle"><span class="glyphicon glyphicon-sort"></span></td>
<td class="id-column">{{{ $cats->id }}}</td>
<td>{{{ $cats->title }}}</td>
</tr>
@endforeach
</tbody>
</table>
</body>
<script>
/**
*
* @param type string 'insertAfter' or 'insertBefore'
* @param entityName
* @param id
* @param positionId
*/
var changePosition = function(requestData){
$.ajax({
'url': '/sort',
'type': 'POST',
'data': requestData,
'success': function(data) {
if (data.success) {
console.log('Saved!');
} else {
console.error(data.errors);
}
},
'error': function(){
console.error('Something wrong!');
}
});
};
$(document).ready(function(){
var $sortableTable = $('.sortable');
if ($sortableTable.length > 0) {
$sortableTable.sortable({
handle: '.sortable-handle',
axis: 'y',
update: function(a, b){
var entityName = $(this).data('entityname');
var $sorted = b.item;
var $previous = $sorted.prev();
var $next = $sorted.next();
if ($previous.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveAfter',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $previous.data('itemid')
});
} else if ($next.length > 0) {
changePosition({
parentId: $sorted.data('parentid'),
type: 'moveBefore',
entityName: entityName,
id: $sorted.data('itemid'),
positionEntityId: $next.data('itemid')
});
} else {
console.error('Something wrong!');
}
},
cursor: "move"
});
}
$('.sortable td').each(function(){ // fix jquery ui sortable table row width issue
$(this).css('width', $(this).width() +'px');
});
});
</script>
</html>
