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="https://www.mintik.com/?p=12123" target="_blank">Click me</a>
           <ul>
             <li>Pumpkin</li>
             <li>
                <a href="https://www.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>

Download

Demo