本帖最后由 hr_answer 于 2010-07-31 10:41:12 编辑

解决方案 »

  1.   

    这个track.js没有用的, 可能是广告之类的东西,现在http://stats.byspirit.ro这个站可能过期了。
    刚我把那个拖拽的源代码拿出来试了下没问题呀。<html>
    <head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Draggables demo - Interface plugin for jQuery</title>
    <script type="text/javascript" src="http://interface.eyecon.ro/jquery/jquery.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/interface/iutil.js"></script>
    <script type="text/javascript" src="http://interface.eyecon.ro/interface/idrag.js"></script>
    <style type="text/css" media="all">body
    {
    background: #fff;
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    }.draggable {
    position: absolute;
    width: 80px;
    height: 40px;
    border: 1px solid #0090DF;
    background-color: #68BFEF;
    padding: 10px;
    text-align: center;
    }#parentElem
    {
    width: 402px;
    height: 160px;
    background-color: #FFDFDF;
    border: 10px solid #900;
    padding: 20px;
    top: 150px;
    left: 0px;
    position: absolute;
    overflow: hidden;
    margin: 10px;
    color: #000;
    border-left-width: 10px;
    }
    #insideParent
    {
    width: 100px;
    height: 100px;
    background-color: #9c0;
    color: #fff;
    }
    #drag1
    {
    top: 10px;
    left: 10px;
    }
    #drag2
    {
    top: 10px;
    left: 130px;
    }
    #drag3
    {
    top: 10px;
    left: 250px;
    }
    #drag4
    {
    top: 10px;
    left: 370px;
    }
    #drag5
    {
    top: 80px;
    left: 10px;
    }
    #drag6
    {
    top: 80px;
    left: 130px;
    }
    #drag7
    {
    top: 80px;
    left: 250px;
    }
    #drag7 div
    {
    cursor: move;
    background-color: #900;
    height: 15px;
    }
    #drag8
    {
    top: 80px;
    left: 370px;
    }
    .frameClass
    {
    border: 1px dotted #999;
    }
    </style>
    </head>
    <body>
    <div id="parentElem">border: 5px; padding: 5px; margin: 5px;<div id="insideParent">Drag me inside my parrent</div></div>
    <div id="drag1" class="draggable"><a href="index.php">Drag me</a></div>
    <div id="drag2" class="draggable">Ghostly</div>
    <div id="drag3" class="draggable">Revert</div>
    <div id="drag4" class="draggable">Moved by grid [50,50]</div>
    <div id="drag5" class="draggable">Moved only vertically</div>
    <div id="drag6" class="draggable">Moved only horizontally</div>
    <div id="drag7" class="draggable"><div></div>Drag by handle</div>
    <div id="drag8" class="draggable">with cursorAt</div>
    <script type="text/javascript">
    $(document).ready(
    function()
    {
    $('#drag1').Draggable({snapDistance: 10, frameClass: 'frameClass'});
    $('#drag2').Draggable(
    {
    ghosting: true,
    opacity: 0.5,
    fx: 300
    }
    );
    $('#drag3').Draggable(
    {
    revert: true,
    fx: 100
    }
    );
    $('#drag4').Draggable(
    {
    grid: [50,50]
    }
    );
    $('#drag5').Draggable(
    {
    axis: 'vertically'
    }
    );
    $('#drag6').Draggable(
    {
    axis: 'horizontally'
    }
    );
    $('#drag7').Draggable(
    {
    handle: 'div'
    }
    );
    $('#insideParent').Draggable(
    {
    zIndex:  1000,
    ghosting: false,
    opacity:  0.7,
    containment : 'parent'
    }
    );
    $('#drag8').Draggable(
    {
    /* onDragModifier : function(x,y)
    {
    var centerx = 600;
    var centery = 400;
    var angle = Math.atan((centery-y)/(centerx-x));
    if((centerx-x)>=0)
    angle += Math.PI;
    radius = 160;
    return {
    x: radius * Math.cos(angle) + centerx, 
    y: radius * Math.sin(angle) + centery
    }
    }
    */
    cursorAt: { top: -5, left: -5 }
    }
    );
    }
    );
    </script>
    </body>
    </html>
      

  2.   

    首先感谢7楼的回复 终于有人理我了啊 ~!\(^o^)/~
    <html>
    <head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Draggables demo - Interface plugin for jQuery</title>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="js/iutil.js"></script>
    <script type="text/javascript" src="js/idrag.js"></script>
    <style type="text/css" media="all">body
    {
        background: #fff;
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10pt;
    }.draggable {
        position: absolute;
        width: 80px;
        height: 40px;
        border: 1px solid #0090DF;
        background-color: #68BFEF;
        padding: 10px;
        text-align: center;
    }#parentElem
    {
        width: 402px;
        height: 160px;
        background-color: #FFDFDF;
        border: 10px solid #900;
        padding: 20px;
        top: 150px;
        left: 0px;
        position: absolute;
        overflow: hidden;
        margin: 10px;
        color: #000;
        border-left-width: 10px;
    }
    #insideParent
    {
        width: 100px;
        height: 100px;
        background-color: #9c0;
        color: #fff;
    }
    #drag1
    {
        top: 10px;
        left: 10px;
    }
    #drag2
    {
        top: 10px;
        left: 130px;
    }
    #drag3
    {
        top: 10px;
        left: 250px;
    }
    #drag4
    {
        top: 10px;
        left: 370px;
    }
    #drag5
    {
        top: 80px;
        left: 10px;
    }
    #drag6
    {
        top: 80px;
        left: 130px;
    }
    #drag7
    {
        top: 80px;
        left: 250px;
    }
    #drag7 div
    {
        cursor: move;
        background-color: #900;
        height: 15px;
    }
    #drag8
    {
        top: 80px;
        left: 370px;
    }
    .frameClass
    {
        border: 1px dotted #999;
    }
    </style>
    </head>
    <body>
    <div id="parentElem">border: 5px; padding: 5px; margin: 5px;<div id="insideParent">Drag me inside my parrent</div></div>
    <div id="drag1" class="draggable"><a href="index.php">Drag me</a></div>
    <div id="drag2" class="draggable">Ghostly</div>
    <div id="drag3" class="draggable">Revert</div>
    <div id="drag4" class="draggable">Moved by grid [50,50]</div>
    <div id="drag5" class="draggable">Moved only vertically</div>
    <div id="drag6" class="draggable">Moved only horizontally</div>
    <div id="drag7" class="draggable"><div></div>Drag by handle</div>
    <div id="drag8" class="draggable">with cursorAt</div>
    <script type="text/javascript">
    $(document).ready(
        function()
        {
            $('#drag1').Draggable({snapDistance: 10, frameClass: 'frameClass'});
            $('#drag2').Draggable(
                {
                    ghosting:    true,
                    opacity:    0.5,
                    fx:            300
                }
            );
            $('#drag3').Draggable(
                {
                    revert:        true,
                    fx:            100
                }
            );
            $('#drag4').Draggable(
                {
                    grid:        [50,50]
                }
            );
            $('#drag5').Draggable(
                {
                    axis:    'vertically'
                }
            );
            $('#drag6').Draggable(
                {
                    axis:    'horizontally'
                }
            );
            $('#drag7').Draggable(
                {
                    handle:    'div'
                }
            );
            $('#insideParent').Draggable(
                {
                    zIndex:     1000,
                    ghosting:    false,
                    opacity:     0.7,
                    containment : 'parent'
                }
            );
            $('#drag8').Draggable(
                {
                    /* onDragModifier : function(x,y)
                    {
                        var centerx = 600;
                        var centery = 400;
                        var angle = Math.atan((centery-y)/(centerx-x));
                        if((centerx-x)>=0)
                            angle += Math.PI;
                        radius = 160;
                        return {
                            x: radius * Math.cos(angle) + centerx, 
                            y: radius * Math.sin(angle) + centery
                        }
                    }
                    */
                    cursorAt: { top: -5, left: -5 }
                }
            );
        }
    );
    </script>
    </body>
    </html>以上是我的代码,只是JQUERY可能用的不一样,其他的没什么不同。但运行出来效果就是
    http://interface.eyecon.ro/demos/drag.html例子中类似于$('#drag2')都可以
    连续拖拽几次都没问题,而我的例子在本机上运行,仅能拖拽一次,之后就不能拖拽了,这是为什么呢?
      

  3.   

    搞明白了!我直接把网站上的JS都下到本地来,运行实现效果了。 
    可能是JQUERY版本不一样导致的吧,我原来用的是最新的版本1.4.2。
    JQUERY不能向下兼容的吗?(⊙_⊙?) 我初学,领教了。结贴了。  
      

  4.   


    <div class="for_drag">A</div>
    <div class="for_drag">B</div>我现在是取得.for_drag进行拖动, 如果拖动B没问题,但是拖动A之后,B会消失,怎么处理?
      

  5.   


    我也发现了这个问题? 不同版本的jquery以及其插件如何共存啊?