高分求jquery ui 做的图片拖拽（是图片副本被拖拽到一个div内而原图不动）的demo

请附上完整的源文件（css,js,html),

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>jQuery UI Example Page</title>
    <link type="text/css" href="css/start/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
    <script type="text/javascript">
    $(function(){
    $('#from img').draggable({
    helper: 'clone',
    revert: 'invalid',
    scope : 'img'
    });
    $('#to').droppable({
    scope : 'img',
    drop  : function(event, ui){
    ui.draggable.clone().appendTo($('#to'));
    }
    });
    });
    </script>
    <style type="text/css">
    .container {
    width: 400px;
    height: 300px;
    border: solid 1px green;
    margin-bottom: 10px;
    }
    </style>
    </head>
    <body>
    <div id="from" class="container">
    <img src="1.jpg" />
    </div>
    <div id="to" class="container"></div>
    </body>
    </html>js/jquery-ui-1.8.14.custom.min.js 包含draggable和droppable即可就是在drop事件中clone一个放到目标div中
      

  2.   

    可能我没有说清我的问题，对于朋友 inetfuture 的code，我运行后为把图片副本拖拽到div内时会自动排列appendto到div中（我是要我在div内哪放，图片就在那），并且你的demo还有问题是拖拽过来的图片不能在div内再被拖拽，其实我是想要类似“百搭服饰网“中的自己动手图片搭配的效果。我发这个提问因为我现在做出来的有一个问题：第一次拖拽到div时图片会自动排序（而不是放到哪停在哪，这就是问题所在），但后面拖拽图片副本不会出现这问题，我把我的code提在这里，希望大虾指点下：
    code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>My JSP 'demo.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
                    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    </head>
    <body>
    <STYLE>
    .ui-widget-content{
        z-index:500;
    width: 100px;
    height: 100px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
    }
    #droppable {
    z-index:5;
    width: 650px;
    height: 800px;
    padding: 0.5em;
    float: left;
    margin: 10px;
    border: solid 3px #ccc;
    }
    </STYLE> <SCRIPT>
    $(function() {   
    $( ".ui-widget-content" ).draggable({revert:'invalid',opacity:0.7,helper:'clone',connectToSortable :'#droppable'});
    var d=$( "#droppable" );
    d.sortable=function(){
       alert(1);
    }
    $( "#droppable" ).droppable({
    drop: function( event,ui ) {
       $(this).addClass("#droppable");                           
    }
    }).sortable({
         start: function(event, ui) { 
        ui.item.draggable();
    }
    });                      
    }); $(function() {
                  $(".ui-widget-conten").resizable();
           });
    </SCRIPT>
    <DIV class="ui-widget-content" name="1">
    <img alt="1" src="4.jpg" >
    </DIV>
    <DIV class="ui-widget-content" name="2">
    <img alt="2" src="4.jpg">
    </DIV>
    <DIV class="ui-widget-content" name="3">
    <img alt="3" src="4.jpg">
    </DIV>
    <DIV class="ui-widget-content" name="4">
    <img alt="4" src="4.jpg">
    </DIV>
    </DIV>
    <DIV class="demo"> <DIV class="ui-widget-header" id="droppable">
    <P>
    Drop here 28
    </P>
    </DIV>
    <!-- End demo -->
    <DIV class="demo-description" style="DISPLAY: none">
    <P>
    Enable any DOM element to be droppable, a target for draggable
    elements.
    </P>
    </DIV>
    <!-- End demo-description -->
    </body>
    </html>
      

  3.   


    $(function() {          
    $( ".ui-widget-content" ).draggable({
    revert : 'invalid',
    opacity : 0.7,
    helper : 'clone',
    scope : 'drop'
    });
    $( "#droppable" ).droppable({
    scope : 'drop',
    drop : function( event,ui ) {
    var ud = ui.draggable;
    if( ud.draggable( "option", "helper" ) == "clone" ) {
    ud.clone()
    .appendTo($( "#droppable" ))
    .css({
    position : 'absolute',
    left  : ui.offset.left,
    top : ui.offset.top
    })
    .draggable({
    scope : 'drop',
    revert : 'invalid'
    })
    .resizable();   
    }                         
    },
    out : function( event, ui ) {
    ui.draggable.remove();
    }
    });                   
    }); 其它还有层叠顺序的问题 自己解决吧