同時拖動兩個元素

Question

我想同時拖動“ sun”和“ dark_sun”。 隨着“ sun”的重新定位，我也希望“ dark_sun”也重新定位。 但是，“ dark_sun”應始終位於“ sun”之后。 http://whatisupson.tumblr.com/

    <style>
        /* Colors */
        body {
             background: url(http://i.imgur.com/aZty7Mq.png);
             animation: mymove 4s linear infinite;
             -webkit-animation: mymove 4s linear infinite;
             -moz-animation: mymove 4s linear infinite;
        }
        @keyframes mymove {
            0% { background-position: 0 0; }
            50% { background-position: 40% 0; }
        }
        #dark_sun {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 20%;
            left: 10%;
        }
        #sun {
            position: absolute;
            width: 300px;
            height: 300px;
            top: 20%;
            left: 10%;
        }
    </style>

    <html>
    <body>
            <img id="dark_sun" src="http://i.imgur.com/f3UFHb7.png">
            <img id="sun" src="http://i.imgur.com/DGkZYZQ.png">
    </body>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
    var width = 300;
    var sun = $("#sun");

    sun.draggable({
      axis: "x",
      containment: 'body',
      drag: function() {
        var x = sun.offset().left + (sun.width() / 2);
        var total = $(window).width();

        var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);
        console.log(x, $(window).width(), heightPct * 100);
        this.style["margin-top"] = "" + Math.round(heightPct * 30) + "%";
      }
    });
    </script>
    </html>

Answer 1

jsBin演示

var sun  = $("#sun");
var dark = $("#dark_sun");                /* what about getting him too? */

sun.draggable({
  axis: "x",
  containment: 'body',
  drag: function() {
    var x = sun.offset().left + (sun.width() / 2);
    var total = $(window).width();
    var heightPct = Math.pow((total / 2) - x, 2) / Math.pow($(window).width() / 2, 2);

    $(this).css({
      marginTop: heightPct * 30 +"%"
    });

    dark.css({                           /* and update it's position accordingly */
      left:x -(sun.width()/2),
      marginTop: heightPct * 30 +"%"
    });

  }
});

您還可以使用ui回調屬性值，例如：

ui.position.left // See below demo

jsBin演示

同時拖動兩個元素

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-18 23:12:27

同時拖動兩個元素

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-18 23:12:27

解決方案1
1 已采納 2015-10-18 23:12:27