jOrgCharts.js – Sürükle-bırak ürün sıralama

Elinizde  kategorilere  ayırmak zorunda  olduğunuz  çok karmaşık  sayılabilecek bir liste var ve tek tek bunları  elle girmek sizi oldukça uğraştıracak gibi görünüyor. Ayrıca  bu tarz işlemleri her  gün tekrar ediyorsanız eğer web sitenizde sürükle  bırak (drag and drop) ile çalışan bir uygulama  kullanarak ürünleri, içerikleri çok kolay bir şekilde bir düzenleyebilirsiniz.

jOrgChart (organization chart) yani organizasyon grafik aracı adlı jQuery uygulaması ile web sitenizdeki organizasyonları, kategorileri, kategori içeriklerini sürükle bırak yoluyla  bir kategoriden diğerine  oldukça kolay bir şekilde yerleştirebilirsiniz.  Ayrıca x kategorisinden başka bir kategoriye sürüklediğiniz içerikler otomatik alt kategori gibi görünüyor. Bir nevi harita şeklinde olan bir grafik uygulaması da diyebiliriz buna.  Alt kategorilerinizi  ağaç dalları gibi gösteren bir grafik uygulaması

 Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve  Css dosya  adresleri.

<link rel="stylesheet" href="css/jquery.jOrgChart.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="jquery.jOrgChart.js"></script>

 JavaScript : 

   <script>
    jQuery(document).ready(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : true
        });
    });
    </script>

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<pre class="prettyprint lang-html" id="list-html" style="display:none"></pre>       
                </div>              
            </div>
        </div>
    </div>

    <ul id="org" style="display:none">
    <li>
       Food
       <ul>
         <li id="beer">Beer</li>
         <li>Vegetables
           <a href="http://mintik.com/?p=12123" target="_blank">Click me</a>
           <ul>
             <li>Pumpkin</li>
             <li>
                <a href="http://mintik.com/?p=12123" target="_blank">Aubergine</a>
                <p>A link and paragraph is all we need.</p>
             </li>
           </ul>
         </li>
         <li class="fruit">Fruit
           <ul>
             <li>Apple
               <ul>
                 <li>Granny Smith</li>
               </ul>
             </li>
             <li>Berries
               <ul>
                 <li>Blueberry</li>
                 <li><img src="images/raspberry.jpg" alt="Raspberry"/></li>
                 <li>Cucumber</li>
               </ul>
             </li>
           </ul>
         </li>
         <li>Bread</li>
         <li class="collapsed">Chocolate
           <ul>
             <li>Topdeck</li>
             <li>Reese's Cups</li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>            

    <div id="chart" class="orgChart"></div>