标签: draggable

我在手风琴小工具里面有一个可拖动的对象.拖动时,它会约束其父级,即accordion元素.我试图使用'收容'选项但没有成功.

我用FireFox 3.5.5和Chromium 4试过这个.

有办法解决吗？

谢谢

我正在使用JqueryUI拖放到我的一个页面上,由于某种原因,我似乎无法将ui.draggable对象的属性传递到我的droppable drop事件中.

ui.draggable.attr("src")和$(ui.draggable).attr("src")都返回undefined,但是如果我输入ui.draggable.html(),我将返回html.有任何想法吗？

它在firefox中运行得很完美,但是在chrome和opera中它不起作用.

<div> has position:fixed, and is .draggable()

它除了firefox之外不起作用

正如您在下面的代码中看到的那样,标记是可拖动的.在某些情况下,如果标记被丢弃在错误的区域(多边形),我想取消放置事件,因此标记会自动返回其原始位置.

function placeMarker(latlng, color, isDraggable) {
    var marker = new GMarker(latlng, { icon: getIcon(color), draggable: true });
    map.addOverlay(marker);
    GEvent.addListener(marker, "dragend", function () {
        //redraw polygons again
    });
    GEvent.addListener(marker, "click", function () {
        var latlng = marker.getPoint();
        map.openInfoWindowHtml(marker.getPoint(), latlng.y + ", " + latlng.x);
    });
    return marker;
}

问题是如何在事件中已经删除标记时取消标记的拖动dragend事件？

我有一些DOM元素可以使用jQuery UI拖动.所有工作正常但是当我使用jQuery创建一些元素时,它们根本不可拖动.即

$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

提前致谢 !!!

我正在尝试这个:

<script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>');
         $('p.draggable').draggable(); **//This is not working**
     });
</script>

但不知何故,这是有效的

    <script type="text/javascript">
     $(document).ready(function(){
         $('body').append('<p class="draggable">Newly Created Paragraph</p>')
                 .find('p.draggable').draggable(); **This is working**

     });
</script>

好吧,它变得尴尬,已经搜索并尝试了大约5个小时,我只是在圈子里跑...

场景很简单:它是用户配置文件的标题图像,可以将其拖动到某个位置,然后将图像的顶部位置保存到数据库中.

感谢Beetroot-Beetroot的"遏制:'父母'"我对这段代码感兴趣,实际上我想要它做出反应!除了一个大问题.图片只是跳到顶部或底部.没有平滑的滚动？如果我将"父母"改为"父母",它会很好地滚动但是...当然遏制不再存在了.救命？:d

JS

$(function(){
    $(".headerimage").css('cursor','s-resize');
    $(".headerimage").draggable({ containment: 'parent', scroll: false, axis: "y",    stop: function(event, ui) {
            var data = "profileheaderposition="+ui.position.top;
            var destination = "/modules/users/profile/save.php";
            get_data(data, destination, function(test){
                notice(test);
            });
        }
    });                 
});

所以最后但并非最不重要的是,Header包括在内:

<div class="<?php if ($user->id == $profileuser->id) echo "changer"; ?> ui-corner-all" id="profileheader" style="overflow: hidden; width: 650px; height: 260px; position:relative;">
<?php if($profile->profileheader){
    $size = getimagesize($profile->profileheader);
?>
<img id="" class="draggable headerimage" style="position: absolute; top: <?php echo $profile->profileheaderposition; ?>px;" src="<?php echo $profile->profileheader; ?>" alt="profileheader" width="650" />

正如我所说,几个小时的谷歌搜索没有给出任何结果 - 如果我不保存结果它会工作得很好,但哦,好吧......

- …

我是java(fx)的初学者.
如何在JavaFX中获得x和y中的鼠标位置？我尝试使用AWT MouseInfo(也是导入它),但它不起作用.我也在Ensembles中看到了它的代码(在"高级阶段"拖动球窗,这就是我需要做的,拖动我未修饰的JavaFX阶段),但它也不起作用.我正在使用带控制器的FXML,我猜这是主要问题.我应该切换回单文件简单的JavaFX吗？我知道FXML更适合布局用户界面,但我不能让很多这样的代码工作.或者我的控制器是否需要其他类型的代码？请尽可能提供适当的代码和评论.
如果您需要我的一些代码进行检查,请随时询问.

我试图让一个div像水中的船一样拖动,但是我在旋转方面遇到了一些麻烦.

以下是我到目前为止:
jsFiddle

JS

var start, stop;
$('#canoe').draggable({
    containment: '#board',
    cursor: 'none',
    cursorAt: {
        top: 5
    },
    drag: function (event, ui) {
        start = ui.position.left;
        setTimeout(function () {
            stop = ui.position.left;
        }, 150);
        $('#canoe').css({
            'transform': 'rotate(' + (start - stop) + 'deg)'
        });
    }
});

CSS

#board {
    height:100%;
    width:100%;
    background:blue;
}
#canoe {
    background: #fff;
    border-radius:100% 100% 100% 100%;
    height:60px;
    width:10px;
    position:absolute;
    left:50%;
    bottom:0;
    transform-origin:top center;
    transition: transform .2s;
}

HTML

<div id="board">
    <div id="canoe">A</div>
</div>

有没有更好的方法来设置旋转,以便船的前部总是领先,即使360度旋转？

附加上下文:我正在开发 …

我正在努力使拖放也可以排序.我可以从div 1拖到2,从div 2拖到div 1,但因为我使用clone我无法进行排序工作.

有任何想法吗？

$(document).ready(function() {

    $("#qselected").sortable();
    $("#qselected").disableSelection();

    $(".qitem").draggable({
        containment : "#container",
        helper : 'clone',
        revert : 'invalid'
    });

    $("#qselected, #qlist").droppable({
        hoverClass : 'ui-state-highlight',
        drop : function(ev, ui) {
            $(ui.draggable).clone().appendTo(this);
            $(ui.draggable).remove();

            $(".qitem").draggable({
                containment : "#container",
                helper : 'clone',
                revert : 'invalid'
            });
        }
    });
});

现场演示:http://jsfiddle.net/6xXPq/4/

我正在使用 Vuetify buildModule 设置构建 Nuxt 应用程序，并希望v-col通过VueDraggable对多个s 进行排序（在我的情况下，我构建并添加了一个超小型 Nuxt 插件，该插件draggable从 VueDraggable 的默认导出绑定了一个全局组件）。在v-colS的关系用一个包裹v-row，所以我使用的是draggable与组件tag="v-row"。这在运行开发服务器时运行良好（nuxt-ts在我的情况下，因为我使用 Nuxt 和 typescript 支持），但在生产模式下构建和运行时失败。

为了说明这个问题，这里有一些关于正在发生的事情的信息。我的来源如下（即我使用Pug）：

在开发模式下，我的 v-row 在 Vuetify 的 DOM 中正确呈现：

但是在生产模式下构建和运行时，可拖动组件实际上呈现v-row为 DOM 标签，而不是通过 Vuetify 进行呈现/解析：

有没有人知道如何确定根本原因以及如何在此处解决？我现在可能可以解决这个问题，但想知道这是否是 Nuxt 错误，或者是否有人以任何其他方式解决了这个问题。