All geek questions in one place

Best ajax structure for drag and drop support

I need to create an application and the drag and drop function seems to be the hardest part. What is the best Ajax structure for drag and drop according to one or more of the following parameters:

  • Learning curve
  • Code size
  • Browser compatible
+3
source share
4 answers

My choice would be jQuery UI .

  • . javascript-, , . , . jQuery dropping.

  • jQuery UI , , ( ). , , , , 135kb.

  • , , . jQuery, " IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+ Google Chrome."

!

+6

, , JQuery - . , ( ) ... ( , ).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; utf-8" />
<title>Sortables demo - Interface plugin for jQuery</title>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <script type="text/javascript" src="/interface/interface.js"></script>
<style type="text/css" media="all">
html
{
    height: 100%;
}
img{
    border: none;
}
body
{
    background: #fff;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.groupWrapper
{
    width: 32%;
    float: left;
    margin-right: 1%;
    min-height: 400px;
}
.serializer
{
    clear: both;
}
.groupItem
{
    margin-bottom: 20px;
}
.groupItem .itemHeader
{
    line-height: 28px;
    background-color: #DAFF9F;
    border-top: 2px solid #B5EF59;
    color: #000;
    padding: 0 10px;
    cursor: move;
    font-weight: bold;
    font-size: 16px;
    height: 28px;
    position: relative;
}

.groupItem .itemHeader a
{
    position: absolute;
    right: 10px;
    top: 0px;
    font-weight: normal;
    font-size: 11px;
    text-decoration: none;
}
.sortHelper
{
    border: 3px dashed #666;
    width: auto !important;
}
.groupWrapper p
{
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div id="sort1" class="groupWrapper">
    <div id="newsFeeder" class="groupItem">

        <div class="itemHeader">Feeds<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="news" class="groupItem">
        <div class="itemHeader">News<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">

            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>

    </div>
    <p>&nbsp;</p>
</div>
<div id="sort2" class="groupWrapper">
    <div id="shop" class="groupItem">
        <div class="itemHeader">Shopping<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <p>&nbsp;</p>

</div>
<div id="sort3" class="groupWrapper">
    <div id="links" class="groupItem">
        <div class="itemHeader">Links<a href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>

                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>
        </div>
    </div>
    <div id="images" class="groupItem">
        <div class="itemHeader">Images<a href="#" class="closeEl">[-]</a></div>

        <div class="itemContent">
            <ul>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
                <li>orem ipsum dolor sit amet, consectetuer adipiscing elit</li>
            </ul>

        </div>
    </div>
    <p>&nbsp;</p>
</div>
<script type="text/javascript">
$(document).ready(
    function () {
        $('a.closeEl').bind('click', toggleContent);
        $('div.groupWrapper').Sortable(
            {
                accept: 'groupItem',
                helperclass: 'sortHelper',
                activeclass :   'sortableactive',
                hoverclass :    'sortablehover',
                handle: 'div.itemHeader',
                tolerance: 'pointer',
                onChange : function(ser)
                {
                },
                onStart : function()
                {
                    $.iAutoscroller.start(this, document.getElementsByTagName('body'));
                },
                onStop : function()
                {
                    $.iAutoscroller.stop();
                }
            }
        );
    }
);
var toggleContent = function(e)
{
    var targetContent = $('div.itemContent', this.parentNode.parentNode);
    if (targetContent.css('display') == 'none') {
        targetContent.slideDown(300);
        $(this).html('[-]');
    } else {
        targetContent.slideUp(300);
        $(this).html('[+]');
    }
    return false;
};
function serialize(s)
{
    serial = $.SortSerialize(s);
    alert(serial.hash);
};
</script>
<div  class="serializer">
<a href="#" onClick="serialize(); return false;" >serialize all lists</a>
<a href="#" onClick="serialize('sort1'); return false;" >serialize list 1</a>
<a href="#" onClick="serialize('sort2'); return false;" >serialize list 2</a>
<a href="#" onClick="serialize('sort3'); return false;" >serialize list 3</a>

<a href="#" onClick="serialize(['sort1', 'sort3']); return false;" >serialize lists 2 and 3</a>
</div>
        <script language="JavaScript" type="text/javascript">var client_id = 1;</script>
        <script language="JavaScript" src="http://stats.byspirit.ro/track.js" type="text/javascript"></script>
        <noscript>
        <p><img alt="" src="http://stats.byspirit.ro/image.php?client_id=1" width="1" height="1" /></p>
        </noscript>
</body>
</html>
+1

jQuery, script.aculo.us.

1)

2) , prototype.js(993kb) dragdrop.js(31kb) scriptaculous.js(2kb)

3) IE6 +, Firefox (, 1.5+, 2+, ) Safari (, 2+, , 1,3 +)

: script.aculo.us GitHub script.aculo.us

+1

jQuery . (19kb) , .

( : , GZipped. )

, , UI .

jQuery http://docs.jquery.com/UI

, "", http://plugins.jquery.com/project/Plugins/category/45

0

Source: https://habr.com/ru/post/1706018/

More articles:


All Articles