poster/assets/manage/html/model.html

<style>
.draggable
{
  cursor: pointer;
}

#bg {
  background-image:url('http://192.168.33.10/dreamland/data/upload/1/2020/11/09/d06b800db5022f9ae73dfa4de559eec7.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
}
</style>
<div class="layui-fluid" style="padding: 0px;">
  <div id="bg">
    <div class="draggable" style="color:#fc0f0f;font-size: 16px;width: 50px;left:20px;top:20px;">微笑旋风</div>


    <div class="draggable"  style="width: 50px;height:50px;">
      <img src="http://192.168.33.10/dreamland/data/upload/1/2020/07/06/58802289df6119614c2095230384c2cb.jpg" style="width: 50px;height:50px;">
    </div>

  </div>
</div>

<script id="url">var url = ""</script>
<script>
var p = 1;
$( function() {
  var sort = $(".draggable").draggable({
      opacity: 0.7,
      containment: "#bg",
      addClasses: false,
      stop : function(event, ui) {
        var left = ui.position.left / p;
        var top = ui.position.top / p;
        $.post(url, {id:$(this).attr('data-id'),left:left,top:top}, function()
        {

        })
      }
  });

  $('#bg').each(function() {
    var img=$(this);
    var url=$(this).css('backgroundImage');
    s = url.match(/url\((.*?)\)/);
    url =s[1];
    if(url[0]=="\""){url = url.slice(1,-1)}
    $("<img/>").attr("src", url).load(function() {
        var realWidth = this.width;
        var realHeight = this.height;
        //如果真实的宽度大于浏览器的宽度就按照100%显示
        //var h = 500;
        //p = h / realHeight;
        var h = parseInt(realHeight*p);
        var w = parseInt(realWidth*p);
        img.css("height", h+"px");
        img.css("width",w+"px");

        $(".draggable").each(function() {
          var w = parseInt($(this).css("width")) * p;
          var h = parseInt($(this).css("height")) * p;
          $(this).css("width", w + 'px');
          $(this).css("height", h + 'px');
          if ($(this).find('img')) {
            $(this).find('img').css("width", w + 'px');
            $(this).find('img').css("height", h + 'px');
          }
          var l = parseInt($(this).css("left")) * p;
          var t = parseInt($(this).css("top")) * p;

          $(this).css("left", l + 'px');
          $(this).css("top", t + 'px');

          if ($(this).css("fontSize")) {
            var f = parseInt($(this).css("fontSize")) * p;
            $(this).css("fontSize", f + 'px');
          }

          $(this).show();
          
        });
    });
  });
});
</script>