【问题标题】:Javascript/CSS background positioning/draggingJavascript/CSS 背景定位/拖动
【发布时间】:2012-04-13 20:10:03
【问题描述】:

我正在使用此代码:

    <div style="width: 150px; height: 125px; background: #fff; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding: 7px; border: 1px solid #999; cursor: pointer;">
    <div style="width: 100%; background: url(IMAGE NAME) no-repeat; cursor: pointer; background-position: center; background-size: 170px; height: 125px;">
    </div>
</div>      

我想这样做,以便用户可以将他们的照片定位到准确的位置,而无需保存另一张图像的副本。我知道你可以制作一个可拖动的元素来让你拖动背景,只是不确定如何。

谁能帮帮我?

【问题讨论】:

  • 您发布了两个 div 的代码和一个不清楚的问题。这如何在不到一分钟的时间内获得两次赞成票?
  • 问题是,我如何制作它,以便我可以将背景位置拖动到我想要的位置。我以为这很容易理解。对不起,我的无知。

标签: javascript jquery css draggable


【解决方案1】:
<script>
  $(function() {
    $( "#draggable_parent" ).draggable();
  });
</script>
<div id="draggable_parent" style="width: 450px; height: 450px; background: #fff; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; padding: 7px; border: 1px solid #999; cursor: pointer;">
  <div id="draggable" style="width: 184px; background: url(IMG_URL) no-repeat; cursor: pointer; background-position: center; border:1px solid; background-size: 170px; height: 125px;">
  </div>
</div>

我已经编辑了代码,用上面的代码,外层的div会移动。

【讨论】:

  • 不完全是;我正在寻找一种拖动背景定位的方法。
  • 所以你想移动父div?很抱歉,我只是想了解您想要实现的目标。
  • 第一个div的背景位置,我希望可以通过拖动来移动。
  • 不,我需要能够通过拖动来移动背景位置。我有 jquery-ui 库。
猜你喜欢
  • 2012-07-01
  • 1970-01-01
  • 1970-01-01
  • 2014-11-03
  • 2015-03-10
  • 1970-01-01
  • 2011-05-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多