sortable drag drop image

sortable drag drop image

by jihoon kim

HTML

<script src="https://raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>
<title>TEST sortable</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style>
    .clear_fix:after {content:"";display:block;clear:both;visibility:hidden;font-size:0;width:0;height:0}
    .left{width:25%; float:left;}
    ol,ul{list-style-type:none;}
    .container02{width:100%; padding:20px 0; background:#eee;}
    .container02 .box{width:89%; margin:0 auto; border-top:1px solid #cfcfcf;}
    .container02 .box ul li{border-bottom:1px solid #cfcfcf; padding:10px 10px; background:#fff;}
    .container02 .box .left{float:left; width:59%; }
    .container02 .box .left p{float:left;}
    .container02 .box .left .icon01{width:18%;}
    .container02 .box .left .text{
    font-size:1.50em;
    padding:7px 0 0 7px;
    font-family:"NanumBarunGothic";
    letter-spacing:-2px;
    }
    .container02 .box .right{float:right; width:39%;}
    .container02 .box .right p{float:left; padding-top:5px;}
    .container02 .box .right .use01{width:42.13%; padding-right:6px;}
    .container02 .box .right .use02{width:51.77%;}
</style>
    
<script src="jquery.ui.touch-punch.min.js"></script>
    
<pre style="font-weight:bold">
1. jQuery UI Touch Punch mobile Touch Event.
    site : http://touchpunch.furf.com/
</pre>
    <div class="container02" id="LblockContent">
        <div class="box">
        <ul id="sortable">
            <li class="clear_fix">
                <div class="left clear_fix">
                    <p class="icon01"><img...

JavaScript

$(document).ready(function(e) {

  // html5 mobile able.
  $("#sortable").sortable({
    items: "li:not(.ui-li-divider)"
      //items: ">li"
      ,
    scroll: true,
    handle: ".icon01"
    //,appendTo: document.body
    //,cancel: "p,a,.use01,.use02"
    //items: "li img"
  });
  $("#sortable").sortable();
  $("#sortable").disableSelection();
  $("#sortable").bind("sortstop", function(event, ui) {
    //alert("정룔 처리실11행.");
    //        $('#sortable').listview('refresh');
  });

  // html5 only.
  $('li').removeClass('ui-corner-bottom');
  $('ul')
    .addClass('ui-corner-top')
    .removeClass('ui-corner-all')
    .sortable({
      'containment': 'parent',
      'opacity': 0.6,
      update: function(event, ui) {
        alert("dropped");
      }
    });

});