标签: draggable

我有一些小图标可以通过jQuery拖动我克隆,我可以在拖动开始时使可拖动图标更大吗？

我有一组图像position:relative(显示一个旁边的图像).

我使用此代码拖放它们(从jQuery API文档中窃取,根据我的需要进行修改).

$(function() {
        $( ".draggable" ).draggable({
                start: function(event, ui) {
                    // Show start dragged position of image.
                    var Startpos = $(this).offset();
                    $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
                    pos_left = Startpos.left; //pos_left is global
                    pos_top = Startpos.top; //pos_top is also global
                },
                stop: function(event, ui) {
                    // Show dropped position.
                    var Stoppos = $(this).offset();
                    $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    $(this).css('position', "fixed"); //tried absolute and relative, too
                    $(this).css('left', pos_left);
                    $(this).css('top', pos_top); …

我正在使用Jquery-ui.我在一个页面中有不同的可丢弃的ul(s),以及不同的可拖动的li(s).我想要的是:1.ul的标题彼此不同,如"FUNCTION","BUG"等.2.li因类别而异,如".FUNCTOIN",".BUG", 3.具有"FUNCTION"标题的ul只能接受带有".FUNCTION"等级的li.只有在视图中创建它们时才能知道ul的标题.存储在db中的值.

但后来我遇到了一些问题,这里有不同的饱和度:

如果我使用恒定值,它运作良好,如:

        $("ul.droppable").droppable({
            accept: ".FUNCTION",

而以下所有方式都失败了:

        $("ul.droppable").droppable({
            accept: "." + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: '.' + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: "\." + $(this).attr("title"), 

        $("ul.droppable").droppable({
            accept: '\.' + $(this).attr("title"), 

所以我把"." 在标题中尝试了以下内容,但所有这些都失败了:

        $("ul.droppable").droppable({
            accept: $(this).attr("title"), 

顺便说一句,当我的意思是"失败",没有错误,弹出等等.可放置的东西不起作用(不活跃,不悬停,不能下降.).

我发现了很多这种"接受"的转发或Q/A,但它们都使用了可以在运行时之前定义的东西.所以"接受"只能使用恒定值,或者我使用它的方式是错误的？感谢您的回答或建议或评论可能会有所帮助.

根据Xnake的回答,这样做的方法是:

在旧代码droppable之前,添加前3行:

        $("ul.droppable.accept").droppable({
            accept: function (e) { if (e.hasClass($(this).attr('accept'))) return true; }
        });
        $("ul.droppable").droppable({
            activeClass: "ui-state-default",
            ... //this is the old code.

这意味着如果我们给droppable ul一个"accept"类,它只接受带有某个类的对象; 否则,它可以接受任何可拖动的.

然后在视图中:

<ul class = "stories-of-category droppable accept" accept = "@map.Type" >
...
</ul>

如果任何具有@ map.Type同名类的对象,则可以将其删除.例如:

<ul title = ".."> //this …

这就是我现在所拥有的 - http://jsfiddle.net/kommandoss/YuRpU/32/

当信拖过空白它停留在那个地方,信件的原始位置是空白的,而不会影响信件的其余部分的possition我想要做的是,任何建议,我应该怎么做,我应该让空盒子成为div或者还有其他方法,谢谢

我正在设计一个表单构建界面.所有可用字段都位于界面左侧的无序列表中,右侧有一个大的空的无序列表,它将成为我的webform.使这个界面工作的"技巧"是将左侧的列表项转换为有效的html元素,方法是将html附加到droppable ui元素中,然后将它们附加到右侧的可排序列表中.

我有它工作......主要是...使用draggable()和sortable().目前,我使用sortable的receive事件从draggable元素中获取id,我将其置于data()块中以传递给update事件.从那里,我使用id元素进行ajax调用,确定它是什么类型的字段以及应该从后端添加哪些选项,构建元素,然后将其放在接口中使用ui.item.html,这是一个由更新功能.

我的方法的问题是它在拖动元素时也会触发,这会导致选择元素在无意中附加到可排序列表时乱丢屏幕.显然,receive事件是仅在排序从连接列表中获取项目时触发的事件.但是,如果我尝试内部html ui.item元素,它会更改源列表,而不是所需的目标.当项目已经在右侧的网络表单列表中时,如果它们只是被排序,我绝对不想修改它们.

有没有办法在连接sortable()列表接收事件中访问和更改目标html ？还有其他策略可以解决我的挑战吗？

代码:

<div class="grid_3 mainwindow formfields">

    <h3>Available Fields</h3>
    <div id="accordion">
         <ul>
            <li>First Name</li>
            <li>Last Name</li>  
            <li>Company</li>            
         </ul>
    </div>

    </div>
    </div> 

    <div class="grid_12 formcontainer formfields">
    <h3>Webform</h3>
    <form id="form" action="http://responses.smarttracks.com" method="post">
         <input type="hidden" name="webform_id" id="webform_id" value="<?php echo $webform_id ?>"></input>

         <ul id="webform_list"></ul>
    </form>
    </div>

和jQuery

/*****  Make webform fields draggable   *****/
    $( ".master_list li" ).draggable({
        connectToSortable: "#webform_list",
        helper: "clone",
        revert: "invalid"
    });

/*****  Make form elements sortable *****/
    $( "#webform_list" ).sortable({
        revert: …

关于如何保存可拖动DIV的位置有很多解决方案,但我没有发现任何有助于在php中使用While循环.

我有一个"需求"数据库,我想显示符合人员用户名和状态= inprogress的所有"需求".这可能是1需要或1,000,000需求,具体取决于是否符合标准.

我想在移动时自动保存需要位置(DIV).这可能吗？如果可以的话,我想使用SQL将值存储在数据库中.

这里我现在的代码显示"需要"(div)


标题

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
  #set { clear:both; float:left; width: 368px; height: 120px; }
  p { clear:both; margin:0; padding:1em 0; }
  </style>


<script>
$(function() {
  $( "#set div" ).draggable({ 
    stack: "#set div" 
  });
});


</script>

身体

<div id="set">

<?

$query = mysql_query("SELECT * FROM needs WHERE (needsusername='$username' OR workerusername='$username') …

我试图让一个可放置的区域接受多个div,但它只接受最近声明的.我无法找到如何解决这个问题.

这是代码:

$(".square").draggable({helper: 'clone'});
$(".rect").draggable({helper: 'clone'});

$("#canvas").droppable({
    accept: ".square",
    accept: ".rect",
    drop: function(ev,ui){
        $(ui.draggable).clone.appendTo(this);

我一直在努力寻找应该是一项简单任务的答案.我想在一个固定高度的div内堆叠图像(相同的宽度).简单.但是,除了能够使用容器div的滚动条扫描图像之外,我还希望JQuery可拖动小部件允许用户上下抓取和滑动图像堆栈.

我遇到的问题是:

1. 拖动和滚动似乎没有链接,因此图像包装器div位置与容器div的滚动条不匹配.
2. 我想停止在包装器底部上方滚动最后一个图像,同样,停止将顶部图像拖到顶部下方.由于内容大于容器,因此包含在此处不起作用.

我在这里乱七八糟地小提琴:http://jsfiddle.net/QhWbm/

// HTML
<div id="wrapper">
    <div id="scroller">
        <img src="http://placekitten.com/200/100" width="200" height="100" />
        <img src="http://placekitten.com/200/200" width="200" height="200" />
        <img src="http://placekitten.com/200/150" width="200" height="150" />
        <img src="http://placekitten.com/200/250" width="200" height="250" />
    </div>
</div>

// JS
$(document).ready(function(){
    $("#scroller").draggable({
        axis:"y"        
    });
});

// CSS
#wrapper {
    width: 220px;
    height: 200px;
    overflow: auto;
    border: 1px solid #ff0000;
}

快速播放将显示拖动和滚动条之间的断开连接以及拖动顶部/底部的功能.

任何建议都很棒,非常感谢

我试图在2个表之间提供可拖动和可排序的功能.我提供了2种方法,用户可以选择文件,可以拖放文件,也可以双击文件,然后将其添加到选中的列表中.示例代码是@ http://jsfiddle.net/fwjaj/.我遇到的问题是,当我双击并添加文件时,我可以在选定的文件表中对它们进行排序,但是当我拖放它们时,我无法做到.我在这里错过了什么？任何帮助都非常感谢.非常感谢你的帮助.

代码如下

CSS

div {
    float: left;
    margin-left: 5px;
}

.draggable tbody td {
    padding: 2px;
    border: 1px solid black;
}

.draggable thead td {
    padding: 1px;
    border-bottom: 1px solid black;
    font-weight: bold;
}

tr.even {
    background-color: white;
}

tr.odd {
    background-color: #a6dbed;
}

HTML

<div style="width: 98%">
   <div style="width: 45%">
      <table id="tblFiles" style="width: 100%" class="draggable">
         <thead>
            <tr>
               <td>
                  Current Files
               </td>
            </tr>
         </thead>
         <tbody>
            <tr id="1">
               <td>File 1</td>
            </tr>
            <tr id="2">
               <td>File 2</td>
            </tr>
            <tr id="3">
               <td>File …

我有一个页面,其中有2个iframe,并排,来自同一个域.我想将一个元素从一个iframe的特定拖动区域(例如一个表格)拖放到另一个iframe的特定拖放区域(例如列表).我检查了stackoverflow和其他地方的所有相关问题,但我找不到合适的解决方案.我尝试使用jQuery UI draggable,但问题是返回的draggable元素包含在iframe中.我无法将其拖出iframe边界.所以,我的下一个想法是在顶部(父)窗口上创建可拖动元素,但是我想我必须以某种方式从iframe上的dragstart事件触发父窗口上的拖动事件.但是,当我将鼠标悬停在丢帧上的相应元素上时,如何检测掉落事件？

哦,如果这已经不够了,我也想让它在IE8上工作:)但是现在,我只想说我会找到一个不涉及拖放的IE8的后备解决方案.