将按钮添加到 moving/dragged 背景 HTML/CSS/JS

Question

我制作了一个可拖动的背景，效果很好。我还需要向其添加按钮。我需要按钮相应地随背景移动（这是一张有一些地方的地图）。

现在我有一个可拖动的背景和上面的按钮，但按钮并没有随之移动。我怎样才能做到这一点？我试图在互联网上搜索但没有发现任何有用的东西。请帮忙。

// When the user clicks on div, open the popup
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

$(document).ready(function() {
  var $bg = $('.bg-img'),
    data = $('#data')[0],
    elbounds = {
      w: parseInt($bg.width()),
      h: parseInt($bg.height())
    },
    bounds = {
      w: 4000 - elbounds.w,
      h: 3000 - elbounds.h
    },
    origin = {
      x: 0,
      y: 0
    },
    start = {
      x: 0,
      y: 0
    },
    movecontinue = false;

  function move(e) {
    var inbounds = {
        x: false,
        y: false
      },
      offset = {
        x: start.x - (origin.x - e.clientX),
        y: start.y - (origin.y - e.clientY)
      };

    data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

    inbounds.x = (offset.x * -1) < bounds.w;
    inbounds.y = (offset.y * -1) < bounds.h;

    if (movecontinue && inbounds.x && inbounds.y) {
      start.x = offset.x;
      start.y = offset.y;

      $(this).css('background-position', start.x + 'px ' + start.y + 'px');
    }

    origin.x = e.clientX;
    origin.y = e.clientY;

    e.stopPropagation();
    return false;
  }

  function handle(e) {
    movecontinue = false;
    $bg.unbind('mousemove', move);

    if (e.type == 'mousedown') {
      origin.x = e.clientX;
      origin.y = e.clientY;
      movecontinue = true;
      $bg.bind('mousemove', move);
    } else {
      $(document.body).focus();
    }

    e.stopPropagation();
    return false;
  }

  function reset() {
    start = {
      x: 0,
      y: 0
    };
    $(this).css('backgroundPosition', '0 0');
  }

  $bg.bind('mousedown mouseup mouseleave', handle);
  $bg.bind('dblclick', reset);
});

div.bg-img {
  background-image: url("https://map.snapchat.com/static/sharepreview.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: white;
  border: 1px solid #aaa;
  width: 1900px;
  height: 800px;
  margin: 25px auto;
}

p,
#data {
  text-align: center;
}

#data {
  background: black;
  font-weight: bold;
  color: white;
  padding: 5px;
  font-size: 1.4em;
  border: 1px solid #fff;
}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.popup .popuptext {
  visibility: hidden;
  width: 500px;
  height: 400px;
  //background-color: #555;
  background-image: url("mostpeople.jpg");
  color: #000;
  text-align: left;
  border-radius: 20px;
  padding: 20px;
  z-index: 1;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  margin-left: -80px;
}


/* Popup arrow 
    .popup .popuptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: #555 transparent transparent transparent;
      
    }
    
      /* Toggle this class - hide and show the popup */

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}


/* Add animation (fade in the popup) */

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* ------------------------------------------------popup*/

body {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  overflow-x: hidden;
}

h1 {
  font-size: 80px;
  text-align: right;
  position: bottom;
  right: 340px;
  top: 300px;
  font-weight: normal;
}

button {
  background-color: #FF0000;
  /* red */
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 6px;
  margin: 1px 1px;
  cursor: pointer;
  float: right;
}

.button1 {
  border-radius: 100%;
  position: absolute;
  left: 300px;
  top: 500px;
}


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="bg-img">
  <div class="popup" onclick="myFunction()"><button class="button button1"></button>

    <span class="popuptext" id="myPopup">text of popup;</span>
  </div>
</div>
<p>
  <input type="text" id="data" />
</p>

Answer 1

您可以将父位置设置为相对位置，将子位置设置为绝对位置：

div.bg-img {
    position: relative;
    ...
}
.popup {
   position: absolute;
   ...
}

Answer 2

您好，我已经更新了一些脚本，您可以检查一下

<script>$(document).ready(function(){
  var buttonPostion = $('.button1').position();
    var $bg = $('.bg-img'),
        data = $('#data')[0],
        elbounds = {
            w: parseInt($bg.width()), 
            h: parseInt($bg.height())
        },
        bounds = {w: 4000 - elbounds.w, h: 3000 - elbounds.h},
        origin = {x: 0, y: 0},
        start = {x: 0, y: 0},
        movecontinue = false;

    function move (e){
        var inbounds = {x: false, y: false},
            offset = {
                x: start.x - (origin.x - e.clientX), 
                y: start.y - (origin.y - e.clientY)
            };

        data.value = 'X: ' + offset.x + ', Y: ' + offset.y;

        var xpostion = buttonPostion.top+offset.x;
        var ypostion = buttonPostion.left+offset.y;
        $('.button1').css({top: xpostion+ 'px', left: xpostion+ 'px', position:'absolute'});


        inbounds.x =  (offset.x * -1) < bounds.w;
        inbounds.y =  (offset.y * -1) < bounds.h;

        if (movecontinue && inbounds.x && inbounds.y) {
            start.x = offset.x;
            start.y = offset.y;
            $(this).css('background-position', start.x + 'px ' + start.y + 'px');
        }

        origin.x = e.clientX;
        origin.y = e.clientY;

        e.stopPropagation();
        return false;
    }

    function handle (e){
        movecontinue = false;
        $bg.unbind('mousemove', move);

        if (e.type == 'mousedown') {
            origin.x = e.clientX;
            origin.y = e.clientY;
            movecontinue = true;
            $bg.bind('mousemove', move);
        } else {
            $(document.body).focus();
        }

        e.stopPropagation();
        return false;
    }

    function reset (){
        start = {x: 0, y: 0};
        $(this).css('backgroundPosition', '0 0');
    }

    $bg.bind('mousedown mouseup mouseleave', handle);
    $bg.bind('dblclick', reset);
});</script>

如果你想拖动带有背景的按钮，你应该设置按钮的位置，就像你为背景设置的那样

Answer 3

在这一行之后：

$(this).css('background-position', start.x + 'px ' + start.y + 'px');

添加：

  let buttonStartLeft = 300;
  let buttonStartRight = 500;
  $('.button1').css('left', (buttonStartLeft + start.x) + 'px');
  $('.button1').css('top', (buttonStartRight + start.y) + 'px');

这两个变量只是您为按钮提供的 css 位置的副本，其余的只是使按钮与您的背景移动相同。

将按钮添加到 moving/dragged 背景 HTML/CSS/JS

Adding a button to a moving/dragged background HTML/CSS/JS

html

javascript

css

jquery

draggable