Question

我正在尝试使用jQuery UI layout插件创建两个面板，然后能够拖动＆amp;在两个面板之间放置图像，在右侧，丢弃的图像应该保持它被放下的位置（并且能够拖动它并保持该面板上任何位置的位置），然后当拖动和放大时。从右到左面板放下图像应该像原件一样对齐。

这是我正在处理https://jsfiddle.net/Lwbka9ww/4/的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Layout Container</title>

    <link type="text/css" rel="stylesheet" href="external/layout/layout-default.css" />
    <style type="text/css">
    html, body {
        background: #666;
        width:      100%;
        height:     100%;                   
        padding:    0;
        margin:     0;
        overflow:   auto; /* when page gets too small */
    }
    #container {
        background: #999;
        height:     100%;
        margin:     0 auto;
        width:      100%;
        max-width:  1200px;
        min-width:  700px;
        _width:     700px; /* min-width for IE6 */
    }
    .pane {
        display:    none; /* will appear when layout inits */
    }
    </style>

    <script type="text/javascript" src="external/jquery.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="external/layout/jquery.layout.js"></script>
    <script type="text/javascript">

    $(document).ready(function () {
        $('#container').layout({
            west: { size: "20%" }
        });

        var $left = $( ".ui-layout-west" ), $right = $( ".ui-layout-center" );

        $( ".ui-layout-west .drag" ).draggable({
          cancel: "a.ui-icon", 
          revert: "invalid",
          containment: "#container",
          cursor: "move",
          helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
        });

        $right.droppable({
          accept: ".ui-layout-west .drag",
          activeClass: "ui-state-highlight",
          drop: function( event, ui ) {
            $(".accept").append(ui.draggable);
            $(ui.draggable).css("position", "absolute");
          }
        });


        /*$( ".ui-layout-center .drag" ).draggable({
          cancel: "a.ui-icon", 
          revert: "invalid",
          containment: "#container",
          cursor: "move",
          helper: function () { return $(this).clone().appendTo('body').css('zIndex',5).show(); }
        });

        //$( "li", $('.ui-layout-center') ).draggable();

        function imageDropped( $item ) {
          $item.fadeOut('fast', function() {
            var $list = $( "ul", $right ).length ? $( "ul", $right ) : $( "<ul class='gallery ui-helper-reset'/>" ).appendTo($right);
            $item.appendTo( $list ).fadeIn('fast');
          });
        }*/
    });

    </script>

<style>

.drag {
    cursor: move;
    clear: both;
    padding-top: 10px;
    padding-bottom: 10px;
}
</style>
</head>
<body>
<div id="container">
    <div class="pane ui-layout-center">
        <div class="accept"></div>
    </div>
    <div class="pane ui-layout-west">
        <div class="drag">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLEBYPEhAQDRsNFQ8WIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6IyszODM4NzQtLisBCgoKDQwOFw8PGjclHyQ3ODcsLDc3LDcsLCw0LCwrNywsKywuKywrLDcrNysrKysrKysrKyssLCsrKyssKysrK//AABEIADwAPAMBIgACEQEDEQH/xAAaAAADAQEBAQAAAAAAAAAAAAADBAUGAgEH/8QAMxAAAQMDAgMGBAUFAAAAAAAAAQIDEQAEIQUSEzFBBiJRYXGBIzKxwRVSkaHwFGJjcvH/xAAZAQACAwEAAAAAAAAAAAAAAAABAgADBQT/xAAgEQACAgICAgMAAAAAAAAAAAAAAQIRAxITMSFRBBRB/9oADAMBAAIRAxEAPwAbNmu82tqPDbRGIO5ccsz9PKm+K2ygIBMIH+0n8s0y4Qi3Q8pKdyjEyTCRzgx60mu4ZO5S1fERK0tgBRSfzEePj1EjrWzsombTY4y2pQClCJAx59aJwqlp1+2t7dKY4j3IpGAD6+Y/fnyrm37VW75RtYUkOQUzmByM/YUn3MSpWTil2VuDXnB8qaS6wptLocSEK5Enb/yhruWR8nf9Dj9aueaC8tgWOT6QEs15wfKnNOUxqFwi3bdDTrh2jeOR9Ote2iVPs8RSUpO5QgT0JH2qLNFukwvFJdoyq9Rc4oaQ+kW20N71Snu9dsT1nP6GmE6nplsw6tK0uXC0wn4Z7p6EgkTyEnMmoT3ZnWFMpS01cvKSDHdCJPgciPUUBvsj2lTBNskbgAd1wiE+OAryGKwH8uck2jtWFE3UX9lwuFLB3Ak4gT4n3NJLu30vpDM7k9E972qvd9ldUbuW3bhyYzySoDwEgn6QMZrxq0TbWPFVx27jjltTaWFDe3tBKiYHMkgZ6cq5oqN9llI0Wh6nqSrVFmli3ULgb1EthawkK2nmMZmEzyPnT+gMXurai5ZsOBtLLhDh4YKggKKSoePIGOWakaVrDyUtotbpTTSG7gRxSiVjKRBjOBHXNB0ztOdN7TtXC0lttx075UUwgnMnqPLl1q3kp0PS/C1qVi8zqNwyzdp4La4DqylW4YyB16043dIaTsbuwhIJwlwczkmtIdF0fXrGz1By0Qwu6PHWULO4nwJBznniDUDtXoDH4uo2ejKcZKEwWypKRjpBq7kpeBaPnuma7ePtpQLcKUmExvCYAxk1Yt7u6d+azSAf8gM+lYBu6uFOQxLqlEY2Tu9o9KrN37wILrYG0ZBBUE9P54VwZMPoQ27bjpg7EgjpumP2plK8d4EH0NYpGrrBG19iR/Yr251QRrD6DDrlsoYgBYBI9M1RxSQbNGtLSxC2woeaQr9opdzTdOeUC5YsqUORLY+tTW9bMgFrcD1BKp94pn8SbIG4lKsY2kn6UEpIljStPsS2ho2qNjY2pAnujnjPjJoS9I01yCpo4ECFKwP1rpL2+YX4D5TM0QboxtIpt5ew7tGUbZeBAdtuIgKkEEpJ9Rn6U0xauNugpCuGobY3/KPYU8lwnBAPtTLcqMEnBileQFE620ptq4U4E7t35hO30I+4ozukW7m5TXw1K6bRk9ckY9qeUIRIJn1rlszM+Jo7MOpPTpCG1DYp0Dr3yM+uOVMIsJIi4V495wrmm0ErQdxoavhqOzEJn3qW2Cgf9MW3Mvr2icSaZTs2jBV5wK4BK8qzQXEgEfzrUJR//9k=" /> 
        </div>

        <div class="drag">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSKDplYgDLBnlw0jBK06LriNY4eTqQtsf25U5VV95zAJBB9EavVhQ" /> 
        </div>

        <div class="drag">
            <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-uqB0D8Xnjcao1kZ0W2P-uftmFxJlq6fTATe0YCJX3tdFaL8H" />
        </div>
    </div>
</div>
</body>
</html>

我的主要问题是保持初始位置并保持左侧面板上的阻力变化，我还没有从右到左拖动和左右工作。还没下降。

在面板之间拖放图像

0 个答案: