相关疑难解决方法(0)

我已经尝试使用jquery内置的draggable,我尝试使用自定义拖动功能,但无济于事.两者都有他们尊重的问题,我会尽力突出他们.

基本上,我试图允许拖动一个缩放的div容器上的元素.下面的方法工作好吗小于周围缩放元素2.但如果你高于此,我们会看到一些问题.

任何帮助,将不胜感激.感谢您的时间.

HTML

<div id="container">
    <div id="dragme">Hi</div>
</div>

方法1(Jquery可拖动函数)

我已经尝试了jquery draggable函数,你可以在这个jsfiddle例子中看到.

我在这个例子中发现的问题如下:

• 最大的担忧:可放大的容器在放大时不会改变.因此,如果元素被拖动到缩放容器的一部分上,而该部分不是原始大小的一部分,则它将失败.
• 当您单击拖动div时,它会远离鼠标远距离传送并且不是无缝拖动.

JS

var percent = 2.5;

$("#dragme").draggable({
    zIndex: 3000,
    appendTo: 'body',
    helper: function (e, ui) {
        var draggable_element = $(this),
            width = draggable_element.css('width'),
            height = draggable_element.css('height'),
            text = draggable_element.text(),
            fontsize = draggable_element.css('font-size'),
            textalign = draggable_element.css('font-size');
        return $('<div id="' + draggable_element.id + '" name="' + draggable_element.attr('name') + '" class="text">' + text + '</div>').css({
            'position': 'absolute',
                'text-align': textalign,
                'background-color': …

我有多个可放置的div(都具有相同的大小)和一个可拖动的div.可拖动的div比一个droppable大3倍.当我在droppables div上拖动可拖动的div时,我想找到哪个droppable受到影响.

我的代码看起来像这样:

$(function () {

    $(".draggable").draggable({
        drag: function (event, ui) { }

    });
    $(".droppable").droppable({
        drop: function (event, ui) {
           alert(this.id);
        }
    });

}); 

HTML

<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div0" class="droppable">
    drop in me1!
</div>   
<div style="height:100px; width:200px; border-bottom:1px solid red;"  id="Div1" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div2" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px solid red; " id="Div3" class="droppable">
    drop in me2!
</div>  
<div style="height:100px; width:200px; border-bottom:1px …

这是带有评论的小提琴：http : //jsfiddle.net/7xw1m1qd/1/

html例如：

<div class="droppable"></div>
<div class="drag"></div>

以JS为例：

$('.drag').draggable({});

$('.droppable').droppable({
    out: function() {
      $('.drag').css('background-color', 'red');
    },

    drop: function() {
      $('.drag').css('background-color', 'green');
    },
});

以 CSS 为例：

.droppable {
    width: 200px;
    height: 200px;
    transform: scale(2);    
    -webkit-transform: scale(2);    
    -ms-transform: scale(2); 
    background-color: #C3C3C3;
}

.drag {
    background-color: black;
    width: 20px;
    height: 20px;
    z-index: 10;
    position: absolute;
    top: 10px;
    left: 350px;    
}

问题是：如果 droppable 被缩放（通过变换：缩放），它仍然使用 droppable 的原始尺寸，所以我只能在 droppable 的原始边界中放置元素。

我发现了一些类似的问题，但没有找到有效的解决方案。