cm-web-legacy/application/views/admin/maptoon/category_detail.php

<?php
$menu_code = '1010';
require_once (APPPATH.'views/skin/admin/_content_comm.php');
?>
<!-- jquery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- //jquery UI -->
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable tr { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable tr { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>

<div class="common_table"  style="margin-top: 30px">

	<div style="border:2px red solid;padding:5px;"><b>이곳에 등록된 에피소드들만 웹툰 홈페이지의 위젯에 나오게 됩니다 (예: 슬라이드쇼)</b></div>
	<span style="font-weight:bold">카테고리 명 : </span> <?php echo $c_name;?>
	<div class="common_table clearfix type01">
		<div class="">
			<input type="text" name="search_keyword" id="search_keyword" value="" placeholder="맵툰이름으로 검색" onkeypress="" class="fw300" style="width:300px;height:30px;line-height: 30px;">
			<a href="#" class="btn" id="btn_search"><i class="fa moving_all fa-search" style="margin-left:8px;"></i></a>
		</div>
	</div>
</div>


<form name="frm" method="post" action="/admin/maptoon/register_episode_in_category">
<input type="hidden" name="idx" id="idx" value="<?php if(isset($idx)==TRUE) echo $idx;?>" />
<div class="common_table" style="">
<table>
	<thead>
		<th>썸네일</th>
		<th>맵툰 제목</th>
		<th>관리</th>
	</thead>
	<tbody id="search_row">
	</tbody>
</table>
</div>


<div>&nbsp;<hr></div>

<h3>"<?php echo $c_name;?>"으로 등록된 에피소드들</h3>
<!-- 등록되어 있는 맵툰목록 -->
<div class="common_table">
<table>
	<thead>
		<th>썸네일</th>
		<th>맵툰 제목</th>
		<th>관리</th>
	</thead>
	<tbody id="episode_list">
<?php
// use this one : https://jqueryui.com/sortable/
if(isset($list)==TRUE && is_array($list)==TRUE) {
	if(count($list)==0) {
		echo '<tr><td colspan="3">등록된 내용이 없습니다.</td></tr>';
	} else {
	    //$dataNumber = ($total_rows + $limit)-($page*$limit);
		foreach($list as $val) {
            $idx                = $val['idx'];
			$main_img 	    = $val['main_img'];
			$title 	    = $val['title'];
?>
				<tr>
					<td><?php if($main_img!='') echo '<img src="'.$main_img.'" width="150" >';?></td>
                    <td><?php if($title!='') echo $title;?></td>
					<td style="width:200px" class="tool_btn">
						<a href="#" class="del_button" value="<?php echo $idx;?>"><i class="fa fa-close"></i>삭제</a>

						<input type="hidden" name="episodes_idx[]" value="<?php echo $idx;?>" />
					</td>
				</tr>
<?php
		    //$dataNumber--;
		}
	}
}
?>
	</tbody>
	</table>
</div>
<div class="write_btn">
	<!--a href="javascript:news_arr_del_proc();">삭제</a-->
	<a href="#" id="btn_reg">등록</a>
</div>
</form>


<script type="text/javascript">
// String.prototype.stripSlashes = function(){
//     return this.replace(/\\(.)/mg, "$1");
// }

$(document).ready(function() {
	$("#btn_reg").click(function() {
		$("form[name=frm]").submit();
	});

	$( "#episode_list" ).sortable({
		placeholder: "ui-state-highlight"
	});
	$( "#episode_list" ).disableSelection();

	$("#btn_search").click(function() {
		search_keyword_obj = $("#search_keyword");
		if(search_keyword_obj.val()=='') {
			alert('검색어를 입력해 주십시오.');
			search_keyword_obj.focus();
			return false;
		}
		if(search_keyword_obj.val()!='') {
			$.ajax({
				url: '/admin/maptoon/get_episodes_by_search_keyword/',
				data: {
					format: 'json',
					keyword:search_keyword_obj.val()
				},
				//dataType: 'jsonp',
				type:'get',
				success: function(msg) {
			        var json = $.parseJSON(msg);
			        if(json=='') {
						alert('검색어에 해당하는 웹툰 에피소드가 없습니다.'); return false;
					}
			        html = generate_search_result(json);
			        $("#search_row").empty();
			        $("#search_row").append(html);
			    },
			      error: function(err) {
			        console.log(err);
			    }
			});
		}
	});

	$(document).on("click", "table .add_button", function() {
		_idx = $(this).attr('idx');
		_title = $(this).attr('title');
		_main_img = $(this).attr('main_img');
		console.log(_idx);
		console.log(_title);
		console.log(_main_img);
		html = '<tr><td><img src="'+_main_img+'" width="150" /></td><td>'+_title+'</td><td><input class="del_button" type="button" value="삭제하기" idx="'+_idx+'" img="'+_main_img+'" title=""'+_title+' /><input type="hidden" name="episodes_idx[]" value="'+_idx+'" /></td></tr>';
		$("#episode_list").append(html);

		$(this).parent().parent().remove();
	});

	$(document).on('click','table .del_button', function() {
		$(this).parent().parent().remove();
	});

	function generate_search_result(json_str) {
		if(typeof json_str!=='undefined' && json_str.length>0) {
			html = '';
			json_str.forEach(function(ele){
				html += '<tr><td><img src="'+ele.main_img+'" width="150" /></td><td>'+ele.title+'</td><td><input class="add_button" type="button" value="등록하기" idx="'+ele.idx+'" main_img="'+ele.main_img+'" title="'+ele.title+'" /></td></tr>';
				//console.log(ele.idx);
			});
			return html;
		}
	}
});
</script>